<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/Frog_32px_1177822_easyicon.net.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/Frog_16px_1177822_easyicon.net.ico">
  <link rel="mask-icon" href="/images/Frog_32px_1177822_easyicon.net.ico" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"hxy1997.xyz","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":true,"nav":null,"activeClass":"valine"},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"输入关键字","hits_empty":"没有找到与「${query}」相关搜索","hits_stats":"${hits} 条相关记录，共耗时 ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="很快，又要到了秋招时刻，说实话校招刷题还是很重要的。牛客网这个前端笔试题库，可以说这75题中的前60题道是前端最基础的了，也是考察的东西比较杂，后面的15题更侧重实战，对于巩固基础还是有帮助的的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，方便自己以后复习，也帮后来人少走点弯路。">
<meta property="og:type" content="article">
<meta property="og:title" content="牛客网前端题库详解">
<meta property="og:url" content="https://hxy1997.xyz/2021/06/02/%E7%89%9B%E5%AE%A2%E7%BD%91%E5%89%8D%E7%AB%AF%E9%A2%98%E5%BA%9375%E9%81%93%E8%AF%A6%E8%A7%A3/index.html">
<meta property="og:site_name" content="hxy的博客">
<meta property="og:description" content="很快，又要到了秋招时刻，说实话校招刷题还是很重要的。牛客网这个前端笔试题库，可以说这75题中的前60题道是前端最基础的了，也是考察的东西比较杂，后面的15题更侧重实战，对于巩固基础还是有帮助的的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，方便自己以后复习，也帮后来人少走点弯路。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210619220931.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620111039.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620115859.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620154721.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620172929.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620191704.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620202024.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620202051.gif">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620213837.gif">
<meta property="article:published_time" content="2021-06-02T13:07:33.000Z">
<meta property="article:modified_time" content="2021-09-05T02:42:04.327Z">
<meta property="article:author" content="hxy">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="题库">
<meta property="article:tag" content="牛客网">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210619220931.png">

<link rel="canonical" href="https://hxy1997.xyz/2021/06/02/%E7%89%9B%E5%AE%A2%E7%BD%91%E5%89%8D%E7%AB%AF%E9%A2%98%E5%BA%9375%E9%81%93%E8%AF%A6%E8%A7%A3/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>牛客网前端题库详解 | hxy的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="hxy的博客" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">hxy的博客</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Mia san Mia!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/huxingyi1997" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://hxy1997.xyz/2021/06/02/%E7%89%9B%E5%AE%A2%E7%BD%91%E5%89%8D%E7%AB%AF%E9%A2%98%E5%BA%9375%E9%81%93%E8%AF%A6%E8%A7%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/Robben.gif">
      <meta itemprop="name" content="hxy">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="hxy的博客">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          牛客网前端题库详解
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-06-02 21:07:33" itemprop="dateCreated datePublished" datetime="2021-06-02T21:07:33+08:00">2021-06-02</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-09-05 10:42:04" itemprop="dateModified" datetime="2021-09-05T10:42:04+08:00">2021-09-05</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/web%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">web前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="热度" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">热度：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/06/02/%E7%89%9B%E5%AE%A2%E7%BD%91%E5%89%8D%E7%AB%AF%E9%A2%98%E5%BA%9375%E9%81%93%E8%AF%A6%E8%A7%A3/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/06/02/%E7%89%9B%E5%AE%A2%E7%BD%91%E5%89%8D%E7%AB%AF%E9%A2%98%E5%BA%9375%E9%81%93%E8%AF%A6%E8%A7%A3/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>很快，又要到了秋招时刻，说实话校招刷题还是很重要的。牛客网这个<a target="_blank" rel="noopener" href="https://www.nowcoder.com/activity/oj?tab=3">前端笔试题库</a>，可以说这75题中的前60题道是前端最基础的了，也是考察的东西比较杂，后面的15题更侧重实战，对于巩固基础还是有帮助的的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案，在这里做一个总结，方便自己以后复习，也帮后来人少走点弯路。</p>
<span id="more"></span>

<h3 id="1-修改-this-指向"><a href="#1-修改-this-指向" class="headerlink" title="1. 修改 this 指向"></a>1. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a616b3de81b948fda9a92db7e86bd171">修改 this 指向</a></h3><h4 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h4><p>封装函数 f，使 f 的 this 指向指定的对象。</p>
<p>这里给出三种写法，哪种都可以。</p>
<h4 id="apply修改this作用域"><a href="#apply修改this作用域" class="headerlink" title="apply修改this作用域"></a>apply修改this作用域</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindThis</span>(<span class="params">f, oTarget</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> f.apply(oTarget, <span class="built_in">arguments</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="call修改this作用域"><a href="#call修改this作用域" class="headerlink" title="call修改this作用域"></a>call修改this作用域</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindThis</span>(<span class="params">f, oTarget</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> f.call(oTarget, ...arguments);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind修改this作用域"><a href="#bind修改this作用域" class="headerlink" title="bind修改this作用域"></a>bind修改this作用域</h4><p>注意需要调用函数，bind默认绑定this懒执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindThis</span>(<span class="params">f, oTarget</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> f.bind(oTarget, ...arguments)();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者直接简写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindThis</span>(<span class="params">f, oTarget</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> f.bind(oTarget);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点"><a href="#相关知识点" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>apply、call、bind区别</li>
</ul>
<blockquote>
<p>apply、call、bind的作用都是修改执行上下文<br>apply、call都是返回函数立即执行的结果，其中apply第二个参数之后是数组，call第二个参数之后是单个的值。<br>bind返回的是函数，需要手动执行结果。第二个参数之后是单个的值。</p>
</blockquote>
<h3 id="2-获取-url-参数"><a href="#2-获取-url-参数" class="headerlink" title="2. 获取 url 参数"></a>2. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a3ded747e3884a3c86d09d88d1652e10">获取 url 参数</a></h3><h4 id="问题描述-1"><a href="#问题描述-1" class="headerlink" title="问题描述"></a>问题描述</h4><p>获取 url 中的参数</p>
<ol>
<li>指定参数名称，返回该参数的值 或者 空字符串</li>
<li>不指定参数名称，返回全部的参数对象 或者 {}</li>
<li>如果存在多个同名参数，则返回数组</li>
</ol>
<p>输入：<code>http://www.nowcoder.com?key=1&amp;key=2&amp;key=3&amp;test=4#hehe key</code></p>
<p>输出：[1, 2, 3]</p>
<h4 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span>(<span class="params">sUrl, sKey</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 返回?后面#前面的</span></span><br><span class="line">    <span class="keyword">let</span> sParam = sUrl.split(<span class="string">&quot;?&quot;</span>)[<span class="number">1</span>].split(<span class="string">&quot;#&quot;</span>)[<span class="number">0</span>];  <span class="comment">// key=1&amp;key=2&amp;key=3&amp;test=4</span></span><br><span class="line">    <span class="comment">// 进一步将参数分割为数组</span></span><br><span class="line">    <span class="keyword">let</span> arr = sParam.split(<span class="string">&quot;&amp;&quot;</span>); <span class="comment">// [&quot;key=1&quot;,&quot;key=2&quot;,&quot;key=3&quot;,&quot;test=4&quot;]</span></span><br><span class="line">    <span class="comment">// 结果</span></span><br><span class="line">    <span class="keyword">let</span> res;</span><br><span class="line">    <span class="keyword">if</span>( sKey )&#123; <span class="comment">// 如果指定参数</span></span><br><span class="line">        <span class="comment">// 结果为数组</span></span><br><span class="line">        res = [];</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">            <span class="comment">// 分割为键值对</span></span><br><span class="line">            <span class="keyword">let</span> temp = arr[i].split(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">            <span class="comment">// 存储指定key值的结果</span></span><br><span class="line">            <span class="keyword">if</span>(temp[<span class="number">0</span>] === sKey)&#123;</span><br><span class="line">                res.push(temp[<span class="number">1</span>]);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (res.length === <span class="number">1</span>) &#123;</span><br><span class="line">            <span class="comment">// 长度为1，返回字符串</span></span><br><span class="line">            <span class="keyword">return</span> res[<span class="number">0</span>];</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span>(res.length === <span class="number">0</span>)&#123;</span><br><span class="line">            <span class="comment">// 长度为0，返回空字符串</span></span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 长度大于1返回数组</span></span><br><span class="line">            <span class="keyword">return</span> res;</span><br><span class="line">        &#125;</span><br><span class="line">         </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123; <span class="comment">// 如果不指定参数</span></span><br><span class="line">        <span class="comment">// 结果为对象</span></span><br><span class="line">        res = &#123;&#125;;</span><br><span class="line">        <span class="keyword">if</span>(sParam === <span class="literal">undefined</span> || sParam === <span class="string">&quot;&quot;</span> )&#123;</span><br><span class="line">            <span class="keyword">return</span> res;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">            <span class="comment">// 分割为键值对</span></span><br><span class="line">            <span class="keyword">let</span> temp = arr[i].split(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">            <span class="comment">// 判断是否已存在结果</span></span><br><span class="line">            <span class="keyword">if</span>(!(temp[<span class="number">0</span>] <span class="keyword">in</span> res))&#123;</span><br><span class="line">                <span class="comment">// temp[0]为键，temp[1]的数组为值</span></span><br><span class="line">                res[temp[<span class="number">0</span>]] = []; </span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// 使用变量动态访问对象属性用obj[a]不能用obj.a</span></span><br><span class="line">            res[temp[<span class="number">0</span>]].push(temp[<span class="number">1</span>]); </span><br><span class="line">        &#125;</span><br><span class="line">         </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>大同小异的做法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span>(<span class="params">sUrl, sKey</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    <span class="keyword">let</span> newObj = &#123;&#125;;</span><br><span class="line">    <span class="comment">// 获取?号后面#号前面的值</span></span><br><span class="line">    <span class="keyword">let</span> query = sUrl.split(<span class="string">&quot;#&quot;</span>)[<span class="number">0</span>].split(<span class="string">&quot;?&quot;</span>)[<span class="number">1</span>];</span><br><span class="line">    <span class="comment">// 如果query存在</span></span><br><span class="line">    <span class="keyword">if</span> (query) &#123;</span><br><span class="line">        <span class="keyword">let</span> arr = query.split(<span class="string">&quot;&amp;&quot;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (arr[i]) &#123;</span><br><span class="line">                arr[i] = arr[i].split(<span class="string">&quot;=&quot;</span>);</span><br><span class="line">                <span class="comment">// 数组</span></span><br><span class="line">                <span class="keyword">if</span> (sKey !== <span class="literal">undefined</span>) &#123;</span><br><span class="line">                    <span class="keyword">if</span> (arr[i][<span class="number">0</span>] === sKey) &#123;</span><br><span class="line">                        newArr.push(arr[i][<span class="number">1</span>]);</span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="comment">// 对象</span></span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="keyword">if</span> (arr[i][<span class="number">0</span>] <span class="keyword">in</span> newObj) &#123;</span><br><span class="line">                        newObj[arr[i][<span class="number">0</span>]].push(arr[i][<span class="number">1</span>]);</span><br><span class="line">                    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                        newObj[arr[i][<span class="number">0</span>]] = [arr[i][<span class="number">1</span>]];</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 判断sKey有没有值</span></span><br><span class="line">        <span class="keyword">if</span> (sKey !== <span class="literal">undefined</span>) &#123;</span><br><span class="line">            <span class="keyword">switch</span> (newArr.length) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">                    <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                    <span class="keyword">return</span> newArr[<span class="number">0</span>];</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">default</span>:</span><br><span class="line">                    <span class="keyword">return</span> newArr;</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> newObj;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 如果query不存在，判断sKey是否存在，如果存在就返回空对象，如果不存在就返回空字符串</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> sKey !== <span class="literal">undefined</span> ? &#123;&#125; : <span class="string">&quot;&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-1"><a href="#相关知识点-1" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li><p>url的组成部分</p>
<blockquote>
<p><code>https://user:pass@www.baidu.com:80/index.html?type=1&amp;name=2#haha</code><br><code>http/https</code> 是协议<br><code>user:pass@</code> 是登录认证<br><code>www.baidu.com</code> 是域名，服务器地址<br><code>:80</code> 是端口号<br><code>/index.html</code> 是请求资源文件路径<br><code>?type=1&amp;name=2</code> 是查询字符串，携带参数，给服务器传的内容。<br><code>#haha</code> 是哈希，片段标识符</p>
</blockquote>
</li>
<li><p>split方法</p>
<blockquote>
<p>字符串分割成数组的方法，里面的参数是以什么分割，如果不传就是空字符串为分割，返回值是一个数组。</p>
</blockquote>
</li>
<li><p>query部分可以使用正则</p>
</li>
</ul>
<h3 id="3-dom-节点查找"><a href="#3-dom-节点查找" class="headerlink" title="3. dom 节点查找"></a>3. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/74d74be449af4c66907fe2d6961c255c">dom 节点查找</a></h3><h4 id="问题描述-2"><a href="#问题描述-2" class="headerlink" title="问题描述"></a>问题描述</h4><p>查找两个节点的最近的一个共同父节点，可以包括节点自身</p>
<p>输入描述:<br>oNode1 和 oNode2 在同一文档中，且不会为相同的节点</p>
<h4 id="代码-1"><a href="#代码-1" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">commonParentNode</span>(<span class="params">oNode1, oNode2</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 判断是否为直系节点</span></span><br><span class="line">    <span class="keyword">if</span>(oNode1.contains(oNode2)) &#123;</span><br><span class="line">        <span class="comment">// oNode1已经是oNode2的直系祖节点</span></span><br><span class="line">        <span class="keyword">return</span> oNode1;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 顺着父节点向上查询</span></span><br><span class="line">        <span class="keyword">return</span> commonParentNode(oNode1.parentNode, oNode2);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-2"><a href="#相关知识点-2" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li><p>contains API</p>
<blockquote>
<p>查看dom元素包含关系，包含返回true，不包含返回false<br><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains">参考MDN</a></p>
</blockquote>
</li>
<li><p>递归(参考数据结构树)</p>
</li>
</ul>
<h3 id="4-根据包名，在指定空间中创建对象"><a href="#4-根据包名，在指定空间中创建对象" class="headerlink" title="4. 根据包名，在指定空间中创建对象"></a>4. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a82e035501504cedbe881d08c824a381">根据包名，在指定空间中创建对象</a></h3><h4 id="问题描述-3"><a href="#问题描述-3" class="headerlink" title="问题描述"></a>问题描述</h4><p>根据包名，在指定空间中创建对象<br>输入描述:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">namespace(&#123;<span class="attr">a</span>: &#123;<span class="attr">test</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>&#125;&#125;, <span class="string">&#x27;a.b.c.d&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>输出描述:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">a</span>: &#123;<span class="attr">test</span>: <span class="number">1</span>, <span class="attr">b</span>: &#123;<span class="attr">c</span>: &#123;<span class="attr">d</span>: &#123;&#125;&#125;&#125;&#125;&#125;</span><br></pre></td></tr></table></figure>

<h4 id="代码-2"><a href="#代码-2" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">namespace</span>(<span class="params">oNamespace, sPackage</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 数组</span></span><br><span class="line">    <span class="keyword">let</span> arr = sPackage.split(<span class="string">&#x27;.&#x27;</span>);</span><br><span class="line">    <span class="comment">// 深入的指针</span></span><br><span class="line">    <span class="keyword">let</span> pointer = oNamespace;</span><br><span class="line">    <span class="comment">// 遍历包</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="comment">// 如果为undefined或者不是对象则赋值为空对象</span></span><br><span class="line">        <span class="keyword">if</span> (!pointer[arr[i]] || <span class="keyword">typeof</span> pointer[arr[i]] !== <span class="string">&#x27;object&#x27;</span>) &#123;</span><br><span class="line">            pointer[arr[i]] = &#123;&#125;;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 指针深入该对象</span></span><br><span class="line">        pointer = pointer[arr[i]];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> oNamespace;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>代码写的更加严谨一点</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">namespace</span>(<span class="params">oNamespace, sPackage</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 数组</span></span><br><span class="line">    <span class="keyword">let</span> arr = sPackage.split(<span class="string">&#x27;.&#x27;</span>);</span><br><span class="line">    <span class="comment">// 深入的指针</span></span><br><span class="line">    <span class="keyword">let</span> pointer = oNamespace;</span><br><span class="line">    <span class="comment">// 遍历包</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="comment">// 如果为undefined或者不是对象则赋值为空对象</span></span><br><span class="line">        <span class="keyword">if</span> (!pointer.hasOwnProperty(arr[i]) || <span class="built_in">Object</span>.prototype.toString.call(pointer[arr[i]]) !== <span class="string">&#x27;[object Object]&#x27;</span>) &#123;</span><br><span class="line">            pointer[arr[i]] = &#123;&#125;;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 指针深入该对象</span></span><br><span class="line">        pointer = pointer[arr[i]];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> oNamespace;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-3"><a href="#相关知识点-3" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li><p>判断对象的自身是否有某属性(hasOwnProperty)</p>
</li>
<li><p>hasOwnProperty / typeof / in / instanceof 的区别</p>
<blockquote>
<ul>
<li>hasOwnProperty 是判断对象自身有没有某属性，不包含原型链的方法。</li>
<li>in 是判断对象在自身和原型链上有没有该方法。</li>
<li>instanceof 是判断对象在原型链上有没有该方法。</li>
<li>typeof 判断操作数的类型，但是null也会判断为”object”</li>
</ul>
</blockquote>
</li>
<li><p>准确判断某值的类型</p>
<blockquote>
<p>Object.prototype.toString.call(123) === “[object Number]”<br>Object.prototype.toString.call(‘aaa’) === “[object String]”<br>Object.prototype.toString.call(true) === “[object Boolean]”<br>Object.prototype.toString.call(undefined) === “[object Undefined]”<br>Object.prototype.toString.call(null) === ‘[object Null]’<br>Object.prototype.toString.call({}) === ‘[object Object]’<br>Object.prototype.toString.call([]) === ‘[object Array]’<br>Object.prototype.toString.call(Math) === “[object Math]”<br>Object.prototype.toString.call(new Date()) === “[object Date]”<br>Object.prototype.toString.call(new RegExp) === “[object RegExp]”</p>
</blockquote>
</li>
<li><p>递归(对象的嵌套参考数据结构中的树)</p>
</li>
</ul>
<h3 id="5-数组去重"><a href="#5-数组去重" class="headerlink" title="5. 数组去重"></a>5. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0b5ae9c4a8c546f79e2547c0179bfdc2">数组去重</a></h3><h4 id="问题描述-4"><a href="#问题描述-4" class="headerlink" title="问题描述"></a>问题描述</h4><p>为 Array 对象添加一个去除重复项的方法<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="literal">false</span>, <span class="literal">true</span>, <span class="literal">undefined</span>, <span class="literal">null</span>, <span class="literal">NaN</span>, <span class="number">0</span>, <span class="number">1</span>, &#123;&#125;, &#123;&#125;, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="literal">NaN</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="literal">false</span>, <span class="literal">true</span>, <span class="literal">undefined</span>, <span class="literal">null</span>, <span class="literal">NaN</span>, <span class="number">0</span>, <span class="number">1</span>, &#123;&#125;, &#123;&#125;, <span class="string">&#x27;a&#x27;</span>]</span><br></pre></td></tr></table></figure>

<p>这个题，狗就狗在，还有NaN，所以要参考<a href="https://hxy1997.xyz/2021/02/10/js%E5%87%BD%E6%95%B0%E6%89%8B%E5%86%99/#12-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D">数组去重</a>中的能去掉NaN的方法</p>
<h4 id="利用includes去重"><a href="#利用includes去重" class="headerlink" title="利用includes去重"></a>利用includes去重</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.uniq = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="built_in">this</span>.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!res.includes(<span class="built_in">this</span>[i])) &#123;</span><br><span class="line">            res.push(<span class="built_in">this</span>[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用ES6-Set去重"><a href="#利用ES6-Set去重" class="headerlink" title="利用ES6 Set去重"></a>利用ES6 Set去重</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.uniq = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [...new <span class="built_in">Set</span>(<span class="built_in">this</span>)];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="普通双重循环加NaN标志位"><a href="#普通双重循环加NaN标志位" class="headerlink" title="普通双重循环加NaN标志位"></a>普通双重循环加NaN标志位</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.uniq = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr = [];</span><br><span class="line">    <span class="keyword">let</span> flag = <span class="literal">true</span>;</span><br><span class="line">    <span class="built_in">this</span>.forEach(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// == -1 有两种情况，一种是NaN，一种是有相同值</span></span><br><span class="line">        <span class="keyword">if</span> (arr.indexOf(value) === -<span class="number">1</span>) &#123;</span><br><span class="line">            <span class="comment">// 如果是NaN</span></span><br><span class="line">            <span class="keyword">if</span> (value !== value) &#123;</span><br><span class="line">                <span class="comment">// flag是标记，第一个NaN就进，之后的就不进去</span></span><br><span class="line">                <span class="keyword">if</span> (flag) &#123;</span><br><span class="line">                    arr.push(value);</span><br><span class="line">                    flag = <span class="literal">false</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                arr.push(value);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-4"><a href="#相关知识点-4" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li><p>uniq方法中的this指向哪里?</p>
<blockquote>
<p>Array构造函数的原型方法中的this指的是数组实例。</p>
</blockquote>
</li>
<li><p>Set的特性</p>
<blockquote>
<p>Set存储的成员是唯一的，不是重复的，如果有重复会自动过滤掉.<br><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/c36684658aba">ES6（七）—— Set &amp; Map</a></p>
</blockquote>
</li>
<li><p>(NaN === NaN) =&gt; false</p>
<blockquote>
<p>NaN ： is not a number，不等于自己<br>typeof NaN =&gt; number<br>Object.prototype.toString.call(NaN) =&gt; “[object Number]”<br>ES6 新增方法：Number.isNaN() 用来判断是否属于数字</p>
</blockquote>
</li>
</ul>
<h3 id="6-斐波那契数列"><a href="#6-斐波那契数列" class="headerlink" title="6. 斐波那契数列"></a>6. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/aa8ffe28ec7c4050b2aa8bc9d26710e9">斐波那契数列</a></h3><h4 id="题目描述"><a href="#题目描述" class="headerlink" title="题目描述"></a>题目描述</h4><p>用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等</p>
<p>斐波那契数列基本学js都会，1 1 2 3 5 8 13，后一个是前两个的和。</p>
<h4 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fibonacci</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(n === <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">if</span>(n === <span class="number">1</span> || n === <span class="number">2</span>) <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">return</span> fibonacci(n - <span class="number">1</span>) + fibonacci(n - <span class="number">2</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="动态规划"><a href="#动态规划" class="headerlink" title="动态规划"></a>动态规划</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fibonacci</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 长度不够</span></span><br><span class="line">    <span class="keyword">if</span> (n &lt; <span class="number">2</span>) <span class="keyword">return</span> n;</span><br><span class="line">    <span class="comment">// 优化的动态规划</span></span><br><span class="line">    <span class="keyword">let</span> dp0 = <span class="number">0</span>, dp1 = <span class="number">1</span>;</span><br><span class="line">    <span class="comment">// 动态规划</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">2</span>; i &lt;= n; i++) &#123;</span><br><span class="line">        <span class="keyword">let</span> temp = dp0 + dp1;</span><br><span class="line">        dp0 = dp1;</span><br><span class="line">        dp1 = temp;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> dp1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="特征方程"><a href="#特征方程" class="headerlink" title="特征方程"></a>特征方程</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fibonacci</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> sqrt5 = <span class="built_in">Math</span>.sqrt(<span class="number">5</span>);</span><br><span class="line">    <span class="keyword">const</span> fibN = <span class="built_in">Math</span>.pow((<span class="number">1</span> + sqrt5) / <span class="number">2</span>, n) - <span class="built_in">Math</span>.pow((<span class="number">1</span> - sqrt5) / <span class="number">2</span>, n);</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.round(fibN / sqrt5);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-5"><a href="#相关知识点-5" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>递归</li>
<li>动态规划</li>
<li>特征方程</li>
</ul>
<h3 id="7-时间格式化输出"><a href="#7-时间格式化输出" class="headerlink" title="7. 时间格式化输出"></a>7. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a789783e7c984f10a0bf649f6d4e2d59">时间格式化输出</a></h3><h4 id="题目描述-1"><a href="#题目描述-1" class="headerlink" title="题目描述"></a>题目描述</h4><p>按所给的时间格式输出指定的时间<br>格式说明<br>对于 2014.09.05 13:14:20<br>yyyy: 年份，2014<br>yy: 年份，14<br>MM: 月份，补满两位，09<br>M: 月份, 9<br>dd: 日期，补满两位，05<br>d: 日期, 5<br>HH: 24制小时，补满两位，13<br>H: 24制小时，13<br>hh: 12制小时，补满两位，01<br>h: 12制小时，1<br>mm: 分钟，补满两位，14<br>m: 分钟，14<br>ss: 秒，补满两位，20<br>s: 秒，20<br>w: 星期，为 [‘日’, ‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’] 中的某一个，本 demo 结果为 五</p>
<p>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">formatDate(<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">1409894060000</span>), <span class="string">&#x27;yyyy-MM-dd HH:mm:ss 星期w&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2014-09-05 13:14:20 星期五</span><br></pre></td></tr></table></figure>

<h4 id="使用replace函数"><a href="#使用replace函数" class="headerlink" title="使用replace函数"></a>使用replace函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">formatDate</span>(<span class="params">t, str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> year = <span class="string">&quot;&quot;</span> + t.getFullYear();</span><br><span class="line">    <span class="keyword">let</span> month = t.getMonth() + <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">let</span> day = t.getDate();</span><br><span class="line">    <span class="keyword">let</span> hour = t.getHours();</span><br><span class="line">    <span class="keyword">let</span> minutes = t.getMinutes();</span><br><span class="line">    <span class="keyword">let</span> second = t.getSeconds();</span><br><span class="line">    <span class="keyword">let</span> week = [<span class="string">&quot;日&quot;</span>, <span class="string">&quot;一&quot;</span>, <span class="string">&quot;二&quot;</span>, <span class="string">&quot;三&quot;</span>, <span class="string">&quot;四&quot;</span>, <span class="string">&quot;五&quot;</span>, <span class="string">&quot;六&quot;</span>];</span><br><span class="line">    <span class="keyword">let</span> date = &#123;</span><br><span class="line">        yyyy: year,</span><br><span class="line">        yy: year.slice(<span class="number">2</span>),</span><br><span class="line">        MM: ten(month),</span><br><span class="line">        M: month,</span><br><span class="line">        dd: ten(day),</span><br><span class="line">        d: day,</span><br><span class="line">        HH: ten(hour),</span><br><span class="line">        H: hour,</span><br><span class="line">        hh: ten(hour % <span class="number">12</span>),</span><br><span class="line">        h: hour % <span class="number">12</span>,</span><br><span class="line">        mm: ten(minutes),</span><br><span class="line">        m: minutes,</span><br><span class="line">        ss: ten(second),</span><br><span class="line">        s: second,</span><br><span class="line">        w: week[t.getDay()],</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> date) &#123;</span><br><span class="line">        str = str.replace(key, date[key]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 不足10的前面要加0</span></span><br><span class="line"><span class="keyword">let</span> ten = <span class="function">(<span class="params">num</span>) =&gt;</span> (num &gt;= <span class="number">10</span> ? num : <span class="string">&quot;0&quot;</span> + num);</span><br></pre></td></tr></table></figure>

<h4 id="使用正则表达式"><a href="#使用正则表达式" class="headerlink" title="使用正则表达式"></a>使用正则表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">formatDate</span>(<span class="params">t, str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> obj = &#123;</span><br><span class="line">        <span class="comment">// yyyy: 年份，2014</span></span><br><span class="line">        yyyy: t.getFullYear(),</span><br><span class="line">        <span class="comment">// yy: 年份，14</span></span><br><span class="line">        yy: (<span class="string">&quot;&quot;</span> + t.getFullYear()).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// MM: 月份，补满两位，09</span></span><br><span class="line">        MM: (<span class="string">&quot;0&quot;</span> + (t.getMonth() + <span class="number">1</span>)).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// M: 月份, 9</span></span><br><span class="line">        M: t.getMonth() + <span class="number">1</span>,</span><br><span class="line">        <span class="comment">// dd: 日期，补满两位，05</span></span><br><span class="line">        dd: (<span class="string">&quot;0&quot;</span> + t.getDate()).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// d: 日期, 5</span></span><br><span class="line">        d: t.getDate(),</span><br><span class="line">        <span class="comment">// HH: 24制小时，补满两位，13</span></span><br><span class="line">        HH: (<span class="string">&quot;0&quot;</span> + t.getHours()).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// H: 24制小时，13</span></span><br><span class="line">        H: t.getHours(),</span><br><span class="line">        <span class="comment">// hh: 12制小时，补满两位，01</span></span><br><span class="line">        hh: (<span class="string">&quot;0&quot;</span> + (t.getHours() % <span class="number">12</span>)).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// h: 12制小时，1</span></span><br><span class="line">        h: t.getHours() % <span class="number">12</span>,</span><br><span class="line">        <span class="comment">// mm: 分钟，补满两位，14</span></span><br><span class="line">        mm: (<span class="string">&quot;0&quot;</span> + t.getMinutes()).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// m: 分钟，14</span></span><br><span class="line">        m: t.getMinutes(),</span><br><span class="line">        <span class="comment">// ss: 秒，补满两位，20</span></span><br><span class="line">        ss: (<span class="string">&quot;0&quot;</span> + t.getSeconds()).slice(-<span class="number">2</span>),</span><br><span class="line">        <span class="comment">// s: 秒，20</span></span><br><span class="line">        s: t.getSeconds(),</span><br><span class="line">        <span class="comment">// w: 星期，为 [&#x27;日&#x27;, &#x27;一&#x27;, &#x27;二&#x27;, &#x27;三&#x27;, &#x27;四&#x27;, &#x27;五&#x27;, &#x27;六&#x27;] 中的某一个，本 demo 结果为 五</span></span><br><span class="line">        w: [<span class="string">&quot;日&quot;</span>, <span class="string">&quot;一&quot;</span>, <span class="string">&quot;二&quot;</span>, <span class="string">&quot;三&quot;</span>, <span class="string">&quot;四&quot;</span>, <span class="string">&quot;五&quot;</span>, <span class="string">&quot;六&quot;</span>][t.getDay()],</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> str.replace(<span class="regexp">/([a-z]+)/gi</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$<span class="number">1</span></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> obj[$<span class="number">1</span>];</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-6"><a href="#相关知识点-6" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>获取年月日周时分秒的系统API</li>
<li>格式统一处理</li>
<li>字符串替换 (replace)</li>
</ul>
<h3 id="8-获取字符串的长度"><a href="#8-获取字符串的长度" class="headerlink" title="8. 获取字符串的长度"></a>8. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/e436bbc408744b73b69a8925fac26efc">获取字符串的长度</a></h3><h4 id="题目描述-2"><a href="#题目描述-2" class="headerlink" title="题目描述"></a>题目描述</h4><p>如果第二个参数 bUnicode255For1 === true，则所有字符长度为 1<br>否则如果字符 Unicode 编码 &gt; 255 则长度为 2<br>输入：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hello world, 牛客<span class="string">&#x27;, false</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">17</span><br></pre></td></tr></table></figure>

<h4 id="代码-3"><a href="#代码-3" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">strLength</span>(<span class="params">s, bUnicode255For1</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> len = s.length;</span><br><span class="line">    <span class="keyword">if</span> (bUnicode255For1) <span class="keyword">return</span> len;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; s.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (s[i].charCodeAt() &gt; <span class="number">255</span>) len++;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> len;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-7"><a href="#相关知识点-7" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>获取字符的 Unicode 编码 API —— str.charCodeAt()</li>
</ul>
<h3 id="9-邮箱字符串判断"><a href="#9-邮箱字符串判断" class="headerlink" title="9. 邮箱字符串判断"></a>9. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/c72b2b5472704d4a98597cb74b0257a7">邮箱字符串判断</a></h3><h4 id="题目描述-3"><a href="#题目描述-3" class="headerlink" title="题目描述"></a>题目描述</h4><p>判断输入是否是正确的邮箱格式</p>
<p>考察正则的一道题目，方法也是多种多样，这里只有一种简单的参考。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ^ 表示开头</span></span><br><span class="line"><span class="comment">// [] 表示匹配字符的范围</span></span><br><span class="line"><span class="comment">// \w 表示正常符号 [0-9a-zA-Z_]</span></span><br><span class="line"><span class="comment">// \. 是对任意符.进行转义，表示字符.</span></span><br><span class="line"><span class="comment">// + 表示前面的表达式，一次到多次</span></span><br><span class="line"><span class="comment">// $ 表示结尾</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isAvailableEmail</span>(<span class="params">sEmail</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/^([\w+\.])+@\w+([\.]\w+)+$/</span>.test(sEmail);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-8"><a href="#相关知识点-8" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>邮箱格式</li>
<li>正则表达式的规则和匹配</li>
</ul>
<h3 id="10-颜色字符串转换"><a href="#10-颜色字符串转换" class="headerlink" title="10. 颜色字符串转换"></a>10. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/80b08802a833419f9c4ccc6e042c1cca">颜色字符串转换</a></h3><h4 id="题目描述-4"><a href="#题目描述-4" class="headerlink" title="题目描述"></a>题目描述</h4><p>将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff</p>
<ol>
<li>rgb 中每个 , 后面的空格数量不固定</li>
<li>十六进制表达式使用六位小写字母</li>
<li>如果输入不符合 rgb 格式，返回原始输入</li>
</ol>
<p>输入 ：’rgb(255, 255, 255)’<br>输出 ：<code>#ffffff</code></p>
<h4 id="代码-4"><a href="#代码-4" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">rgb2hex</span>(<span class="params">sRGB</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 提取正则表达式匹配</span></span><br><span class="line">    <span class="keyword">let</span> regexp = <span class="regexp">/rgb\((\d+),\s*(\d+),\s*(\d+)\)/</span>;</span><br><span class="line">    <span class="comment">// 正则匹配获取三个数值</span></span><br><span class="line">    <span class="keyword">let</span> reg = sRGB.match(regexp);</span><br><span class="line">    <span class="keyword">if</span> (!reg || reg.length !== <span class="number">4</span>) <span class="keyword">return</span> sRGB;</span><br><span class="line">    <span class="comment">// 字符串拼接</span></span><br><span class="line">    <span class="keyword">let</span> str = <span class="string">&quot;#&quot;</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt; <span class="number">4</span>; i++) &#123;</span><br><span class="line">        <span class="comment">// 将字符串转成数字</span></span><br><span class="line">        <span class="keyword">let</span> s = <span class="built_in">parseInt</span>(reg[i]);</span><br><span class="line">        <span class="keyword">if</span> (s &gt;= <span class="number">0</span> &amp;&amp; s &lt;= <span class="number">255</span>) &#123;</span><br><span class="line">            <span class="comment">// 然后转化成16进制</span></span><br><span class="line">            str += (s &lt; <span class="number">16</span> ? <span class="string">&#x27;0&#x27;</span> + s.toString(<span class="number">16</span>) : s.toString(<span class="number">16</span>));</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> sRGB;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-9"><a href="#相关知识点-9" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li><p>toString的进制转换</p>
<blockquote>
<p>颜色是16进制，所以toString(16)可以得到结果</p>
</blockquote>
</li>
<li><p>字符串中如何截取数字(不限于正则)</p>
</li>
</ul>
<p><strong>注意：一定要理解之后去程序里面运行一遍。</strong></p>
<h3 id="11-将字符串转换为驼峰格式"><a href="#11-将字符串转换为驼峰格式" class="headerlink" title="11. 将字符串转换为驼峰格式"></a>11. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/2ded24e34ec34325a62d42d0c8479bae">将字符串转换为驼峰格式</a></h3><h4 id="题目描述-5"><a href="#题目描述-5" class="headerlink" title="题目描述"></a>题目描述</h4><p>css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能</p>
<ol>
<li>以 - 为分隔符，将第二个起的非空单词首字母转为大写</li>
<li>-webkit-border-image 转换后的结果为 webkitBorderImage<br> 输入 ： ‘font-size’<br> 输出 ： fontSize</li>
</ol>
<h4 id="代码-5"><a href="#代码-5" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cssStyle2DomStyle</span>(<span class="params">sName</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// split切割函数</span></span><br><span class="line">    <span class="keyword">let</span> arr = sName.split(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    <span class="comment">// 判断第一个是不是 - ，是的话就删除、</span></span><br><span class="line">    <span class="keyword">if</span> (arr.indexOf(<span class="string">&quot;-&quot;</span>) === <span class="number">0</span>) &#123;</span><br><span class="line">        arr.splice(<span class="number">0</span>, <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 处理剩余的 -</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (arr[i] == <span class="string">&quot;-&quot;</span>) &#123;</span><br><span class="line">            arr.splice(i, <span class="number">1</span>);</span><br><span class="line">            arr[i] = arr[i].toUpperCase();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 根据某个字符将数组转成字符串</span></span><br><span class="line">    <span class="keyword">return</span> arr.join(<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-10"><a href="#相关知识点-10" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组常用方法<ul>
<li>split/join</li>
<li>toUpperCase() —— toUpperCase将小写字符转成大写，toLowerCase将大写字符转成小写</li>
<li>slice</li>
</ul>
</li>
</ul>
<h3 id="12-字符串字符统计"><a href="#12-字符串字符统计" class="headerlink" title="12. 字符串字符统计"></a>12. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/777d0cd160de485cae0b1fd1dd973b44">字符串字符统计</a></h3><h4 id="题目描述-6"><a href="#题目描述-6" class="headerlink" title="题目描述"></a>题目描述</h4><p>统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率</p>
<ol>
<li>不限制 key 的顺序</li>
<li>输入的字符串参数不会为空</li>
<li>忽略空白字</li>
</ol>
<p>输入 : </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;hello world&#x27;</span></span><br></pre></td></tr></table></figure>

<p>输出 ：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">h</span>: <span class="number">1</span>, <span class="attr">e</span>: <span class="number">1</span>, <span class="attr">l</span>: <span class="number">3</span>, <span class="attr">o</span>: <span class="number">2</span>, <span class="attr">w</span>: <span class="number">1</span>, <span class="attr">r</span>: <span class="number">1</span>, <span class="attr">d</span>: <span class="number">1</span>&#125;</span><br></pre></td></tr></table></figure>

<h4 id="代码-6"><a href="#代码-6" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> count = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">const</span> char <span class="keyword">of</span> str) &#123;</span><br><span class="line">        <span class="comment">// 去掉空白字符</span></span><br><span class="line">        <span class="keyword">if</span> (char !== <span class="string">&quot; &quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 如果有该属性就+1，没有就设置值为1</span></span><br><span class="line">            count[char] = count.hasOwnProperty(char) ? count[char] + <span class="number">1</span> : <span class="number">1</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> count;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-11"><a href="#相关知识点-11" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>对象赋值</li>
</ul>
<h3 id="13-加粗文字"><a href="#13-加粗文字" class="headerlink" title="13. 加粗文字"></a>13. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/919c502e497f4c53a3f7c336beec7cb4">加粗文字</a></h3><h4 id="题目描述-7"><a href="#题目描述-7" class="headerlink" title="题目描述"></a>题目描述</h4><p>使用一个标签将“牛客网”三个字加粗显示</p>
<h4 id="html"><a href="#html" class="headerlink" title="html"></a>html</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">strong</span>&gt;</span>牛客网<span class="tag">&lt;/<span class="name">strong</span>&gt;</span>，程序员必备求职神器<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="js"><a href="#js" class="headerlink" title="js"></a>js</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> p = <span class="built_in">document</span>.getElementByTagName(<span class="string">&#x27;p&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> text = p.innterHTML;</span><br><span class="line">p.innterHTML = text.replace(<span class="string">&#x27;牛客网&#x27;</span>,<span class="string">&#x27;&lt;strong&gt;牛客网&lt;/strong&gt;&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-12"><a href="#相关知识点-12" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>获取元素及元素内容</li>
<li>加粗标签</li>
</ul>
<h3 id="14-段落标识"><a href="#14-段落标识" class="headerlink" title="14. 段落标识"></a>14. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0f318b9b88fa44339b588147e0a5e7b7">段落标识</a></h3><h4 id="题目描述-8"><a href="#题目描述-8" class="headerlink" title="题目描述"></a>题目描述</h4><p>请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”</p>
<h4 id="html-1"><a href="#html-1" class="headerlink" title="html"></a>html</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>牛客网是一个专注于程序员的学习和成长的专业平台。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="js-1"><a href="#js-1" class="headerlink" title="js"></a>js</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> p = <span class="built_in">document</span>.createElement(<span class="string">&#x27;p&#x27;</span>);</span><br><span class="line">p.innerHTML = <span class="string">&#x27;牛客网是一个专注于程序员的学习和成长的专业平台。&#x27;</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&#x27;body&#x27;</span>).append(p);</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点："><a href="#相关知识点：" class="headerlink" title="相关知识点："></a>相关知识点：</h4><ul>
<li>创建标签createElement</li>
<li>将元素添加到body中 append()</li>
</ul>
<h3 id="15-设置文字颜色"><a href="#15-设置文字颜色" class="headerlink" title="15. 设置文字颜色"></a>15. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/679e4b1089a444e799736cde61d51bc6">设置文字颜色</a></h3><h4 id="题目描述-9"><a href="#题目描述-9" class="headerlink" title="题目描述"></a>题目描述</h4><p>请使用嵌入样式将所有p标签设置为红色文字</p>
<h4 id="行内样式"><a href="#行内样式" class="headerlink" title="行内样式"></a>行内样式</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color:red&quot;</span>&gt;</span>欢迎来到牛客网<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color:red&quot;</span>&gt;</span>在这里，我们为你提供了IT名企的笔试面试题库<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color:red&quot;</span>&gt;</span>在这里，我们以题会友<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color:red&quot;</span>&gt;</span>QQ群号：272820159<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="css样式"><a href="#css样式" class="headerlink" title="css样式"></a>css样式</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">    <span class="selector-tag">p</span> &#123;</span><br><span class="line">        <span class="attribute">color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt;欢迎来到牛客网&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt;在这里，我们为你提供了IT名企的笔试面试题库&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt;在这里，我们以题会友&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt;QQ群号：<span class="number">272820159</span>&lt;/<span class="selector-tag">p</span>&gt;</span><br></pre></td></tr></table></figure>

<h4 id="js-2"><a href="#js-2" class="headerlink" title="js"></a>js</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> p = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;p&#x27;</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; p.length; i++) &#123;</span><br><span class="line">    p[i].style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-13"><a href="#相关知识点-13" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>获取所有p元素：querySelectorAll</li>
<li>给元素设置style样式：dom.style.color</li>
</ul>
<h3 id="16-查找数组元素位置"><a href="#16-查找数组元素位置" class="headerlink" title="16. 查找数组元素位置"></a>16. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/e7835a8113dd48afb15f77ef8d1dcb1d">查找数组元素位置</a></h3><h4 id="题目描述-10"><a href="#题目描述-10" class="headerlink" title="题目描述"></a>题目描述</h4><p>找出元素 item 在给定数组 arr 中的位置<br>输出描述:<br>如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ], <span class="number">3</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">2</span></span><br></pre></td></tr></table></figure>

<h4 id="简单遍历"><a href="#简单遍历" class="headerlink" title="简单遍历"></a>简单遍历</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">indexOf</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (arr[i] == item) <span class="keyword">return</span> i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="ES6新增数组方法"><a href="#ES6新增数组方法" class="headerlink" title="ES6新增数组方法"></a>ES6新增数组方法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">indexOf</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.findIndex(<span class="function"><span class="params">val</span> =&gt;</span> val === item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者直接</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">indexOf</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.indexOf(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-14"><a href="#相关知识点-14" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组遍历</li>
<li>函数返回值</li>
<li>数组方法</li>
</ul>
<h3 id="17-数组求和"><a href="#17-数组求和" class="headerlink" title="17. 数组求和"></a>17. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/cc3ce199461c4c4cb8f63db61d7eba30">数组求和</a></h3><h4 id="题目描述-11"><a href="#题目描述-11" class="headerlink" title="题目描述"></a>题目描述</h4><p>计算给定数组 arr 中所有元素的总和<br>输入描述:<br>数组中的元素均为 Number 类型<br>输入 ：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span> ]</span><br></pre></td></tr></table></figure>

<p>输出 ： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">10</span></span><br></pre></td></tr></table></figure>

<h4 id="使用for循环遍历"><a href="#使用for循环遍历" class="headerlink" title="使用for循环遍历"></a>使用for循环遍历</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">const</span> num <span class="keyword">of</span> arr) &#123;</span><br><span class="line">        count += num;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> count;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">num</span> =&gt;</span> &#123;</span><br><span class="line">        count += num;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> count;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.reduce(<span class="function">(<span class="params">preSum, num</span>) =&gt;</span> num + preSum);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-15"><a href="#相关知识点-15" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组遍历</li>
<li>reduce</li>
</ul>
<h3 id="18-移除数组中的元素"><a href="#18-移除数组中的元素" class="headerlink" title="18. 移除数组中的元素"></a>18. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/edbc7496a36e433c89d298b9256af856">移除数组中的元素</a></h3><h4 id="题目描述-12"><a href="#题目描述-12" class="headerlink" title="题目描述"></a>题目描述</h4><p>移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组<br>输入 : </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">2</span>], <span class="number">2</span></span><br></pre></td></tr></table></figure>

<p>输出 :</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="简单遍历-1"><a href="#简单遍历-1" class="headerlink" title="简单遍历"></a>简单遍历</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">it</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (it !== item) res.push(it);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="filter过滤方法"><a href="#filter过滤方法" class="headerlink" title="filter过滤方法"></a>filter过滤方法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.filter(<span class="function"><span class="params">it</span> =&gt;</span> it !== item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="新数组中使用splice删除"><a href="#新数组中使用splice删除" class="headerlink" title="新数组中使用splice删除"></a>新数组中使用splice删除</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">remove</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.slice(<span class="number">0</span>);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = newArr.length - <span class="number">1</span>; i &gt;= <span class="number">0</span> ; i--) &#123;</span><br><span class="line">        <span class="keyword">if</span>(newArr[i] === item) newArr.splice(i, <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-16"><a href="#相关知识点-16" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组方法哪些是在原数组中改的，哪些是返回新数组的?</li>
</ul>
<blockquote>
<p>返回新数组的API<br> slice \ map \ filter \ reduce \ concat …<br> 返回原数组的API<br> push \ unshift \ shift \ pop \ splice \ sort \ reverse …</p>
</blockquote>
<h3 id="19-移除数组中的元素"><a href="#19-移除数组中的元素" class="headerlink" title="19. 移除数组中的元素"></a>19. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a93dd26ebb8c425d844acc17bcce9411">移除数组中的元素</a></h3><h4 id="题目描述-13"><a href="#题目描述-13" class="headerlink" title="题目描述"></a>题目描述</h4><p>移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回<br>输入:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">2</span>, <span class="number">2</span>], <span class="number">2</span></span><br></pre></td></tr></table></figure>

<p>输出: </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="正序遍历"><a href="#正序遍历" class="headerlink" title="正序遍历"></a>正序遍历</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeWithoutCopy</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span>(arr[i] === item) &#123;</span><br><span class="line">            arr.splice(i, <span class="number">1</span>);</span><br><span class="line">            i--;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="倒序遍历"><a href="#倒序遍历" class="headerlink" title="倒序遍历"></a>倒序遍历</h4><p>这样不用考虑数组长度</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 倒着遍历不用考虑数组长度</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeWithoutCopy</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = arr.length - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">        <span class="keyword">if</span>(item === arr[i]) arr.splice(i, <span class="number">1</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-17"><a href="#相关知识点-17" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>遍历 + 修改数组长度</li>
</ul>
<h3 id="20-添加元素"><a href="#20-添加元素" class="headerlink" title="20. 添加元素"></a>20. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/3c7905cea3264ddaac4bf637ab3a19f9">添加元素</a></h3><h4 id="题目描述-14"><a href="#题目描述-14" class="headerlink" title="题目描述"></a>题目描述</h4><p>在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组<br>输入:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>],  <span class="number">10</span></span><br></pre></td></tr></table></figure>

<p>输出:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">10</span>]</span><br></pre></td></tr></table></figure>

<h4 id="简单迭代"><a href="#简单迭代" class="headerlink" title="简单迭代"></a>简单迭代</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">append</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">val</span> =&gt;</span> newArr.push(val));</span><br><span class="line">    newArr.push(item);</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="slice"><a href="#slice" class="headerlink" title="slice"></a>slice</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insert</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.slice(<span class="number">0</span>);</span><br><span class="line">    newArr.push(item);</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="concat"><a href="#concat" class="headerlink" title="concat"></a>concat</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">append</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.concat(item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="ES6展开运算符"><a href="#ES6展开运算符" class="headerlink" title="ES6展开运算符"></a>ES6展开运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">append</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [...arr, item];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-18"><a href="#相关知识点-18" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>合并新元素，返回新数组</li>
</ul>
<p>这次好多的方法都是数组方法，所以一定要非常的熟悉。这里再把数组的方法整理放上来。<br> <a target="_blank" rel="noopener" href="https://www.jianshu.com/p/753e9c5a940e">Javascript常用的数组方法</a></p>
<h3 id="21-删除数组最后一个元素"><a href="#21-删除数组最后一个元素" class="headerlink" title="21. 删除数组最后一个元素"></a>21. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/df4b0b7a459447538351c4c7008b34e7">删除数组最后一个元素</a></h3><h4 id="题目描述-15"><a href="#题目描述-15" class="headerlink" title="题目描述"></a>题目描述</h4><p>删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>

<p>一些简单方法就不写了，比如用循环一个一个复制除最后一个元素外的元素</p>
<h4 id="slice-1"><a href="#slice-1" class="headerlink" title="slice"></a>slice</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">truncate</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.slice(<span class="number">0</span>, -<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="返回新数组API-pop"><a href="#返回新数组API-pop" class="headerlink" title="返回新数组API + pop()"></a>返回新数组API + pop()</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">truncate</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [].concat(arr);</span><br><span class="line">    newArr.pop();</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-19"><a href="#相关知识点-19" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="22-添加元素"><a href="#22-添加元素" class="headerlink" title="22. 添加元素"></a>22. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/93994cb28b1c4ec5ad7da4f9c33ebfbe">添加元素</a></h3><h4 id="题目描述-16"><a href="#题目描述-16" class="headerlink" title="题目描述"></a>题目描述</h4><p>在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>], <span class="number">10</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">10</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="先把需要插入的树放进去，然后遍历数组"><a href="#先把需要插入的树放进去，然后遍历数组" class="headerlink" title="先把需要插入的树放进去，然后遍历数组"></a>先把需要插入的树放进去，然后遍历数组</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">prepend</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [item];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length ; i++) &#123;</span><br><span class="line">        newArr.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="unshift或者slice"><a href="#unshift或者slice" class="headerlink" title="unshift或者slice"></a>unshift或者slice</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">prepend</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.slice(<span class="number">0</span>);</span><br><span class="line">    newArr.splice(<span class="number">0</span>, <span class="number">0</span>, item); <span class="comment">// newArr.unshift(item);</span></span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="concat-1"><a href="#concat-1" class="headerlink" title="concat"></a>concat</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">prepend</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [item].concat(arr);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-20"><a href="#相关知识点-20" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="23-删除数组第一个元素"><a href="#23-删除数组第一个元素" class="headerlink" title="23. 删除数组第一个元素"></a>23. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0323822699da497b8822898e90025882">删除数组第一个元素</a></h3><h4 id="题目描述-17"><a href="#题目描述-17" class="headerlink" title="题目描述"></a>题目描述</h4><p>删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="for循环push元素"><a href="#for循环push元素" class="headerlink" title="for循环push元素"></a>for循环push元素</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curtail</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">1</span>; i &lt; arr.length ; i++) &#123;</span><br><span class="line">        newArr.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="copy原数组，删除元素返回"><a href="#copy原数组，删除元素返回" class="headerlink" title="copy原数组，删除元素返回"></a>copy原数组，删除元素返回</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curtail</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.slice(<span class="number">0</span>);</span><br><span class="line">    newArr.shift();</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="slice-2"><a href="#slice-2" class="headerlink" title="slice"></a>slice</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curtail</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.slice(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-21"><a href="#相关知识点-21" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组方法API</li>
</ul>
<h3 id="24-数组合并"><a href="#24-数组合并" class="headerlink" title="24. 数组合并"></a>24. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/ba9ee11affbd44539a4104d7f098f06b">数组合并</a></h3><h4 id="题目描述-18"><a href="#题目描述-18" class="headerlink" title="题目描述"></a>题目描述</h4><p>合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>], [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="number">1</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="number">1</span>]</span><br></pre></td></tr></table></figure>

<h4 id="迭代"><a href="#迭代" class="headerlink" title="迭代"></a>迭代</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">concat</span>(<span class="params">arr1, arr2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr1.slice(<span class="number">0</span>);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr2.length; i++)&#123;</span><br><span class="line">        newArr.push(arr2[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="concat-2"><a href="#concat-2" class="headerlink" title="concat"></a>concat</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">concat</span>(<span class="params">arr1, arr2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr1.concat(arr2);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="ES展开运算符"><a href="#ES展开运算符" class="headerlink" title="ES展开运算符"></a>ES展开运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">concat</span>(<span class="params">arr1, arr2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [...arr1, ...arr2];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-22"><a href="#相关知识点-22" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="25-添加元素"><a href="#25-添加元素" class="headerlink" title="25. 添加元素"></a>25. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/941bcfa5b87940869fda681c1597fd3a">添加元素</a></h3><h4 id="题目描述-19"><a href="#题目描述-19" class="headerlink" title="题目描述"></a>题目描述</h4><p>在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>], <span class="string">&#x27;z&#x27;</span>, <span class="number">2</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="string">&#x27;z&#x27;</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="普通迭代"><a href="#普通迭代" class="headerlink" title="普通迭代"></a>普通迭代</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insert</span>(<span class="params">arr, item, index</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>;i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span>(i === index) &#123;</span><br><span class="line">            newArr.push(item);</span><br><span class="line">            newArr.push(arr[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            newArr.push(arr[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="新数组-splice方法"><a href="#新数组-splice方法" class="headerlink" title="新数组+splice方法"></a>新数组+splice方法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insert</span>(<span class="params">arr, item, index</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [...arr];</span><br><span class="line">    newArr.splice(index, <span class="number">0</span>, item);</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="拼数组"><a href="#拼数组" class="headerlink" title="拼数组"></a>拼数组</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">insert</span>(<span class="params">arr, item, index</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 根据index分成两个数组然后concat拼接</span></span><br><span class="line">    <span class="keyword">return</span> arr.slice(<span class="number">0</span>, index).concat(item, arr.slice(index));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-23"><a href="#相关知识点-23" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="26-计数"><a href="#26-计数" class="headerlink" title="26. 计数"></a>26. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/628339bd8e6e440590ad86caa7ac6849">计数</a></h3><h4 id="题目描述-20"><a href="#题目描述-20" class="headerlink" title="题目描述"></a>题目描述</h4><p>统计数组 arr 中值等于 item 的元素出现的次数<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">3</span>], <span class="number">4</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3</span></span><br></pre></td></tr></table></figure>

<h4 id="计数器"><a href="#计数器" class="headerlink" title="计数器"></a>计数器</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(value === item) count++;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> count;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="filter过滤"><a href="#filter过滤" class="headerlink" title="filter过滤"></a>filter过滤</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.filter(<span class="function"><span class="params">val</span> =&gt;</span> val === item);</span><br><span class="line">    <span class="keyword">return</span> newArr.length;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="reduce-1"><a href="#reduce-1" class="headerlink" title="reduce"></a>reduce</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">arr, item</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.reduce(<span class="function">(<span class="params">prev, val</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> val === item ? ++prev : prev;</span><br><span class="line">    &#125;, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-24"><a href="#相关知识点-24" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="27-查找重复元素"><a href="#27-查找重复元素" class="headerlink" title="27. 查找重复元素"></a>27. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/871a468deecf453589ea261835d6b78b">查找重复元素</a></h3><h4 id="题目描述-21"><a href="#题目描述-21" class="headerlink" title="题目描述"></a>题目描述</h4><p>找出数组 arr 中重复出现过的元素<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<h4 id="排序-双指针"><a href="#排序-双指针" class="headerlink" title="排序+双指针"></a>排序+双指针</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicates</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (arr.length &lt; <span class="number">2</span>) <span class="keyword">return</span> arr;</span><br><span class="line">    <span class="keyword">let</span> newArr = arr.slice(<span class="number">0</span>).sort();</span><br><span class="line">    <span class="keyword">let</span> result = [];</span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> j = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">while</span> (j &lt; newArr.length) &#123;</span><br><span class="line">        <span class="keyword">if</span> (newArr[i] === newArr[j]) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!result.includes(newArr[i])) result.push(newArr[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            i = j;</span><br><span class="line">        &#125;</span><br><span class="line">        j++;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="使用两个Set存储"><a href="#使用两个Set存储" class="headerlink" title="使用两个Set存储"></a>使用两个Set存储</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicates</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> hash = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line">    <span class="keyword">let</span> res = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (hash.has(arr[i])) &#123;</span><br><span class="line">            res.add(arr[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            hash.add(arr[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> [...res];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="使用map记录count"><a href="#使用map记录count" class="headerlink" title="使用map记录count"></a>使用map记录count</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicates</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line">    arr.forEach(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (map.has(value)) &#123;</span><br><span class="line">            <span class="keyword">let</span> count = map.get(value);</span><br><span class="line">            map.set(value, ++count);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            map.set(value, <span class="number">1</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> map) &#123;</span><br><span class="line">        <span class="keyword">if</span> (value &gt; <span class="number">1</span>) res.push(key);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用indexOf"><a href="#利用indexOf" class="headerlink" title="利用indexOf"></a>利用indexOf</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">duplicates</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    arr.forEach(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (</span><br><span class="line">            arr.indexOf(value) !== arr.lastIndexOf(value) &amp;&amp;</span><br><span class="line">            newArr.indexOf(value) === -<span class="number">1</span></span><br><span class="line">        )</span><br><span class="line">            newArr.push(value);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-25"><a href="#相关知识点-25" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>算法题：双指针</li>
<li>计数器</li>
<li>索引</li>
</ul>
<h3 id="28-求二次方"><a href="#28-求二次方" class="headerlink" title="28. 求二次方"></a>28. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/b7a8647e33d84f5c88acdd7c81a85fdf">求二次方</a></h3><h4 id="题目描述-22"><a href="#题目描述-22" class="headerlink" title="题目描述"></a>题目描述</h4><p>为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">4</span>, <span class="number">9</span>, <span class="number">16</span>]</span><br></pre></td></tr></table></figure>

<p>题设，就是为map准备的，牛客不太支持ES6以上的语法，目前不支持提示 ，不过正常是可以用的。</p>
<h4 id="map"><a href="#map" class="headerlink" title="map"></a>map</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.map(<span class="function">(<span class="params">item</span>) =&gt;</span> item * item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="forEach-1"><a href="#forEach-1" class="headerlink" title="forEach"></a>forEach</h4><p>如何用forEach实现map，就采用类似的写法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = [];</span><br><span class="line">    arr.forEach(<span class="function">(<span class="params">value</span>) =&gt;</span> &#123;</span><br><span class="line">        newArr.push(value * value);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-26"><a href="#相关知识点-26" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组map方法，以及map的方法实现</li>
<li>平方的写法</li>
</ul>
<h3 id="29-查找元素位置"><a href="#29-查找元素位置" class="headerlink" title="29. 查找元素位置"></a>29. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0a9af9cb20c34babb6232126e019c74d">查找元素位置</a></h3><h4 id="题目描述-23"><a href="#题目描述-23" class="headerlink" title="题目描述"></a>题目描述</h4><p>在数组 arr 中，查找值与 item 相等的元素出现的所有位置<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>,<span class="string">&#x27;d&#x27;</span>,<span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;f&#x27;</span>,<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>,<span class="string">&#x27;c&#x27;</span>] <span class="string">&#x27;a&#x27;</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">0</span>, <span class="number">6</span>]</span><br></pre></td></tr></table></figure>

<h4 id="forEach遍历"><a href="#forEach遍历" class="headerlink" title="forEach遍历"></a>forEach遍历</h4><p>其他的遍历都大同小异，一定是要遍历就对了。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findAllOccurrences</span>(<span class="params">arr, target</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">item, index</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (item === target) res.push(index);</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-27"><a href="#相关知识点-27" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数组API</li>
</ul>
<h3 id="30-避免全局变量"><a href="#30-避免全局变量" class="headerlink" title="30. 避免全局变量"></a>30. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/e362110c727347048f350bd90af31c62">避免全局变量</a></h3><h4 id="题目描述-24"><a href="#题目描述-24" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定的 js 代码中存在全局变量，请修复</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">globals</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    myObject = &#123;</span><br><span class="line">        name : <span class="string">&#x27;Jory&#x27;</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> myObject;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="myObject前面加var-let-const"><a href="#myObject前面加var-let-const" class="headerlink" title="myObject前面加var/let/const"></a>myObject前面加var/let/const</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">globals</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> myObject = &#123;</span><br><span class="line">        name : <span class="string">&#x27;Jory&#x27;</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> myObject;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-28"><a href="#相关知识点-28" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>作用域</li>
</ul>
<blockquote>
<p>不加声明的是全局变量，容易引起全局污染。作用域分为全局作用域、函数作用域，ES6新增了块级作用域。</p>
</blockquote>
<h3 id="31-正确的函数定义"><a href="#31-正确的函数定义" class="headerlink" title="31. 正确的函数定义"></a>31. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a5de760a7cf24c0e890eb02eed34bc02">正确的函数定义</a></h3><h4 id="题目描述-25"><a href="#题目描述-25" class="headerlink" title="题目描述"></a>题目描述</h4><p>请修复给定的 js 代码中，函数定义存在的问题<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">a</span><br></pre></td></tr></table></figure>

<p>原代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functions</span>(<span class="params">flag</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (flag) &#123;</span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">getValue</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">getValue</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> getValue();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="使用函数表达式"><a href="#使用函数表达式" class="headerlink" title="使用函数表达式"></a>使用函数表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functions</span>(<span class="params">flag</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (flag) &#123;</span><br><span class="line">        <span class="keyword">var</span> getValue = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> getValue = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> getValue();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functions</span>(<span class="params">flag</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> getValue;</span><br><span class="line">    <span class="keyword">if</span> (flag) &#123;</span><br><span class="line">        getValue = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        getValue = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> getValue();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-29"><a href="#相关知识点-29" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>函数的定义方式</li>
</ul>
<blockquote>
<p>函数声明式：函数声明在函数没有执行之前就已经在作用域中会提升，同名的声明会进行覆盖，以下面的为准，那么程序执行的时候一直输出的就是b。</p>
<p>函数表达式：使用函数表达式，还是会进行变量的提升，只不过这次提升的是变量getValue，在执行的时候，才会根据if语句的流程控制执行不同的函数。</p>
</blockquote>
<h3 id="32-正确的使用-parseInt"><a href="#32-正确的使用-parseInt" class="headerlink" title="32. 正确的使用 parseInt"></a>32. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a14f83473c384abba1bb51017d0dbd42">正确的使用 parseInt</a></h3><h4 id="题目描述-26"><a href="#题目描述-26" class="headerlink" title="题目描述"></a>题目描述</h4><p>修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例<br>输入：’12’    输出：12<br>输入： ‘12px’    输出：12<br>输入： ‘0x12’    输出：0</p>
<h4 id="确定是十进制"><a href="#确定是十进制" class="headerlink" title="确定是十进制"></a>确定是十进制</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parse2Int</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseInt</span>(num, <span class="number">10</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-30"><a href="#相关知识点-30" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>parseInt</li>
</ul>
<blockquote>
<p>parseInt经常用于强制类型转换中显式转换成数字，接收两个参数，返回数值或者NaN</p>
<p>parseInt(string, radix)<br> 第一个参数是字符串，必须传的。<br> 第二个参数是数字的基数，2-36，如果不传或者传0都是以10位基数来计算，如果小于2(不等于0)或者大于36一律返回NaN，如果’0x’开头为16进制，’0’开头不包括0是8进制。</p>
<p>parseInt强制类型转化的时候，如果第一位不是数字就会返回NaN，如果第一位是数字，那么会把后面是数字的返回，不是数字的过滤掉。如果是小数的话，会向下取整成整数。</p>
</blockquote>
<h3 id="33-完全等同"><a href="#33-完全等同" class="headerlink" title="33. 完全等同"></a>33. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/1d7e4611cea64950aa3a10caf2529c92">完全等同</a></h3><h4 id="题目描述-27"><a href="#题目描述-27" class="headerlink" title="题目描述"></a>题目描述</h4><p>判断 val1 和 val2 是否完全等同</p>
<h4 id="代码-7"><a href="#代码-7" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">identity</span>(<span class="params">val1, val2</span>) </span>&#123;</span><br><span class="line">     <span class="keyword">return</span> val1 === val2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-31"><a href="#相关知识点-31" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>等同</li>
</ul>
<blockquote>
<p>== 和 === 的区别，简单来说在于，== 只判断值相同，遇到问题，=== 还要判断类型是否相同。<br> 这里其实我觉得还需要考虑NaN的问题，NaN !== NaN</p>
</blockquote>
<h3 id="34-计时器"><a href="#34-计时器" class="headerlink" title="34. 计时器"></a>34. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/72c661d926494bd8a50608506915268c">计时器</a></h3><h4 id="题目描述-28"><a href="#题目描述-28" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现一个打点计时器，要求</p>
<ol>
<li>从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1</li>
<li>返回的对象中需要包含一个 cancel 方法，用于停止定时操作</li>
<li>第一个数需要立即输出</li>
</ol>
<h4 id="代码-8"><a href="#代码-8" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">start, end</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(start++);</span><br><span class="line">    <span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(start &lt;= end)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(start++);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, <span class="number">100</span>);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        cancel: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-32"><a href="#相关知识点-32" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>setInterval</li>
</ul>
<blockquote>
<p>计时器，如果第一个要立即输出，那么需要手动写一次。<br> 定义的时候接收两个参数，第一个是每次执行的函数，第二个是执行时间间隔。<br> 返回值接收计时器名称，可以用于清空计时器用。</p>
</blockquote>
<ul>
<li>闭包</li>
</ul>
<h3 id="35-流程控制"><a href="#35-流程控制" class="headerlink" title="35. 流程控制"></a>35. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/8a7bff7ab0d345d5ac5c82e41d9f7115">流程控制</a></h3><h4 id="题目描述-29"><a href="#题目描述-29" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现 fizzBuzz 函数，参数 num 与返回值的关系如下：<br>1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz<br>2、如果 num 能被 3 整除，返回字符串 fizz<br>3、如果 num 能被 5 整除，返回字符串 buzz<br>4、如果参数为空或者不是 Number 类型，返回 false<br>5、其余情况，返回参数 num<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">15</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fizzbuzz</span><br></pre></td></tr></table></figure>

<h4 id="代码-9"><a href="#代码-9" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fizzBuzz</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果num为空或者不传，isNaN都为true</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">isNaN</span>(num)) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">if</span> (num % <span class="number">3</span> === <span class="number">0</span> &amp;&amp; num % <span class="number">5</span> === <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;fizzbuzz&#x27;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (num % <span class="number">3</span> === <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;fizz&#x27;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (num % <span class="number">5</span> === <span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;buzz&#x27;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> num;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-33"><a href="#相关知识点-33" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>流程控制：if-else</li>
<li>isNaN</li>
</ul>
<blockquote>
<p>isNaN()，遇到不是Number类型的判断都用这个函数，如果参数不是数字就返回true，其他的判断我觉得都不是这个题要考的。ES6之后新增了方法Number.isNaN() 判断是否是NaN</p>
</blockquote>
<ul>
<li>取余 %</li>
</ul>
<h3 id="36-函数传参"><a href="#36-函数传参" class="headerlink" title="36. 函数传参"></a>36. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/80365a2685144559817e3d5e0c27f3a8">函数传参</a></h3><h4 id="题目描述-30"><a href="#题目描述-30" class="headerlink" title="题目描述"></a>题目描述</h4><p>将数组 arr 中的元素作为调用函数 fn 的参数<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> (<span class="params">greeting, name, punctuation</span>) </span>&#123;<span class="keyword">return</span> greeting + <span class="string">&#x27;, &#x27;</span> + name + (punctuation || <span class="string">&#x27;!&#x27;</span>);&#125;, [<span class="string">&#x27;Hello&#x27;</span>, <span class="string">&#x27;Ellie&#x27;</span>, <span class="string">&#x27;!&#x27;</span>]</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hello, Ellie!</span><br></pre></td></tr></table></figure>

<h4 id="直接传参"><a href="#直接传参" class="headerlink" title="直接传参"></a>直接传参</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">argsAsArray</span>(<span class="params">fn, arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn(...arr);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="apply"><a href="#apply" class="headerlink" title="apply"></a>apply</h4><p>量身定做，传的是数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">argsAsArray</span>(<span class="params">fn, arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.apply(<span class="built_in">this</span>, arr);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="call"><a href="#call" class="headerlink" title="call"></a>call</h4><p>如果用call就需要使用扩展符打散</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">argsAsArray</span>(<span class="params">fn, arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.call(<span class="built_in">this</span>, ...arr);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind"><a href="#bind" class="headerlink" title="bind"></a>bind</h4><p>如果bind处理，需要执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">argsAsArray</span>(<span class="params">fn, arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.bind(<span class="built_in">this</span>,...arr)();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-34"><a href="#相关知识点-34" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>apply/call/bind (详情见一的第一题)</li>
<li>fn传参问题</li>
</ul>
<h3 id="37-函数的上下文"><a href="#37-函数的上下文" class="headerlink" title="37. 函数的上下文"></a>37. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/5e97b94794bd438f893137b2d3b28a6a">函数的上下文</a></h3><h4 id="题目描述-31"><a href="#题目描述-31" class="headerlink" title="题目描述"></a>题目描述</h4><p>将函数 fn 的执行上下文改为 obj 对象<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;<span class="keyword">return</span> <span class="built_in">this</span>.greeting + <span class="string">&#x27;, &#x27;</span> + <span class="built_in">this</span>.name + <span class="string">&#x27;!!!&#x27;</span>;&#125;, &#123;<span class="attr">greeting</span>: <span class="string">&#x27;Hello&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;Rebecca&#x27;</span>&#125;</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hello, Rebecca!!!</span><br></pre></td></tr></table></figure>

<h4 id="apply-1"><a href="#apply-1" class="headerlink" title="apply"></a>apply</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">speak</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.apply(obj);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="call-1"><a href="#call-1" class="headerlink" title="call"></a>call</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">speak</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.call(obj);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind-1"><a href="#bind-1" class="headerlink" title="bind"></a>bind</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">speak</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.bind(obj)();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-35"><a href="#相关知识点-35" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>this指向</li>
</ul>
<blockquote>
<p>apply/call/bind 都可以修改执行上下文，如果直接调用fn，this指的是window，如果用 apply/call/bind 可以将this改成对象obj</p>
</blockquote>
<h3 id="38-返回函数"><a href="#38-返回函数" class="headerlink" title="38. 返回函数"></a>38. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/1f9fd23cdfd14675ab10207191e1d035">返回函数</a></h3><h4 id="题目描述-32"><a href="#题目描述-32" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现函数 functionFunction，调用之后满足如下条件：<br>1、返回值为一个函数 f<br>2、调用返回的函数 f，返回值为按照调用顺序的参数拼接，拼接字符为英文逗号加一个空格，即 ‘, ‘<br>3、所有函数的参数数量为 1，且均为 String 类型<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">functionFunction(<span class="string">&#x27;Hello&#x27;</span>)(<span class="string">&#x27;world&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hello, world</span><br></pre></td></tr></table></figure>

<h4 id="代码-10"><a href="#代码-10" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionFunction</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">newStr</span>) </span>&#123;</span><br><span class="line">        <span class="comment">// 记得逗号之后要加一个空格，才能过oj</span></span><br><span class="line">        <span class="keyword">return</span> str + <span class="string">&#x27;, &#x27;</span> + newStr;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-36"><a href="#相关知识点-36" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>闭包 + 柯里化</li>
</ul>
<blockquote>
<p>闭包的作用是一个函数可以访问另一个函数作用域的变量。</p>
</blockquote>
<h3 id="39-使用闭包"><a href="#39-使用闭包" class="headerlink" title="39. 使用闭包"></a>39. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/578026cd24e3446bbf27fe565473dc26">使用闭包</a></h3><h4 id="题目描述-33"><a href="#题目描述-33" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现函数 makeClosures，调用之后满足如下条件：<br>1、返回一个函数数组 result，长度与 arr 相同<br>2、运行 result 中第 i 个函数，即 <code>result[i]()</code>，结果与 <code>fn(arr[i])</code> 相同<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> x * x;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">4</span></span><br></pre></td></tr></table></figure>

<h4 id="使用let-循环"><a href="#使用let-循环" class="headerlink" title="使用let+循环"></a>使用let+循环</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">makeClosures</span>(<span class="params">arr, fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> result = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">        result.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> fn(arr[i]);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="使用map函数"><a href="#使用map函数" class="headerlink" title="使用map函数"></a>使用map函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">makeClosures</span>(<span class="params">arr, fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arr.map(<span class="function"><span class="params">item</span> =&gt;</span> fn.bind(<span class="built_in">this</span>, item));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-37"><a href="#相关知识点-37" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>闭包</li>
</ul>
<blockquote>
<p>上面的题，如果不用闭包，那么for循环的嘶吼，最后调用函数的时候，i都是arr.length,如果使用闭包，可以是当时循环的i值。</p>
</blockquote>
<h3 id="40-二次封装函数"><a href="#40-二次封装函数" class="headerlink" title="40. 二次封装函数"></a>40. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/fb2d46b99947455a897f2e9fe2268355">二次封装函数</a></h3><h4 id="题目描述-34"><a href="#题目描述-34" class="headerlink" title="题目描述"></a>题目描述</h4><p>已知函数 fn 执行需要 3 个参数。请实现函数 partial，调用之后满足如下条件：<br>1、返回一个函数 result，该函数接受一个参数<br>2、执行 result(str3) ，返回的结果与 fn(str1, str2, str3) 一致<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> sayIt = <span class="function"><span class="keyword">function</span>(<span class="params">greeting, name, punctuation</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> greeting + <span class="string">&#x27;, &#x27;</span> + name + (punctuation || <span class="string">&#x27;!&#x27;</span>);</span><br><span class="line">&#125;;</span><br><span class="line">partial(sayIt, <span class="string">&#x27;Hello&#x27;</span>, <span class="string">&#x27;Ellie&#x27;</span>)(<span class="string">&#x27;!!!&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Hello, Ellie!!!</span><br></pre></td></tr></table></figure>

<h4 id="直接调用"><a href="#直接调用" class="headerlink" title="直接调用"></a>直接调用</h4><p>因为没有涉及到this，这里直接用arguments来获取，因为arguments是类数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">str3</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn(str1, str2, str3);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>改用箭头函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="params">str3</span> =&gt;</span> fn(str1, str2, str3);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="扩展运算符"><a href="#扩展运算符" class="headerlink" title="扩展运算符"></a>扩展运算符</h4><p>用扩展运算符拿到参数传入，更加的通用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...args</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn(str1, str2, args);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="call-2"><a href="#call-2" class="headerlink" title="call"></a>call</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">str3</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.call(<span class="built_in">this</span>, str1, str2, str3);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="apply-2"><a href="#apply-2" class="headerlink" title="apply"></a>apply</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">str3</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.apply(<span class="built_in">this</span>, [str1, str2, str3]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind-2"><a href="#bind-2" class="headerlink" title="bind"></a>bind</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">str3</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.bind(<span class="built_in">this</span>, str1, str2, str3)();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者直接简化</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partial</span>(<span class="params">fn, str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.bind(<span class="built_in">this</span>, str1, str2); <span class="comment">// 或 return fn.bind(null, str1, str2);</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-38"><a href="#相关知识点-38" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>闭包</li>
<li>获取函数参数arguments</li>
</ul>
<blockquote>
<p>arguments 类数组，<br> 获取长度arguments.length<br> 获取元素用数组下标arguments[0]<br> 获取当前执行的函数 arguments.callee (ES5严格模式下禁用)</p>
</blockquote>
<h3 id="41-使用-arguments"><a href="#41-使用-arguments" class="headerlink" title="41. 使用 arguments"></a>41. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/df84fa320cbe49d3b4a17516974b1136">使用 arguments</a></h3><h4 id="题目描述-35"><a href="#题目描述-35" class="headerlink" title="题目描述"></a>题目描述</h4><p>函数 useArguments 可以接收 1 个及以上的参数。请实现函数 useArguments，返回所有调用参数相加后的结果。本题的测试参数全部为 Number 类型，不需考虑参数转换。<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">10</span></span><br></pre></td></tr></table></figure>

<h4 id="直接遍历"><a href="#直接遍历" class="headerlink" title="直接遍历"></a>直接遍历</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useArguments</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        count += <span class="built_in">arguments</span>[i];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> count;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="ES6把arguments转化成数组用数组的方式相加"><a href="#ES6把arguments转化成数组用数组的方式相加" class="headerlink" title="ES6把arguments转化成数组用数组的方式相加"></a>ES6把arguments转化成数组用数组的方式相加</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useArguments</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Array</span>.from(<span class="built_in">arguments</span>).reduce(<span class="function">(<span class="params">prev, item</span>) =&gt;</span> prev + item, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useArguments</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [...arguments].reduce(<span class="function">(<span class="params">pre, item</span>) =&gt;</span> pre + item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-39"><a href="#相关知识点-39" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>arguments —— 函数参数的获取和类数组的运算。</li>
</ul>
<h3 id="42-使用-apply-调用函数"><a href="#42-使用-apply-调用函数" class="headerlink" title="42. 使用 apply 调用函数"></a>42. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/d47b482e7148497582c7a995df51f393">使用 apply 调用函数</a></h3><h4 id="题目描述-36"><a href="#题目描述-36" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现函数 callIt，调用之后满足如下条件<br>1、返回的结果为调用 fn 之后的结果<br>2、fn 的调用参数为 callIt 的第一个参数之后的全部参数<br>输入：无    输出：无</p>
<h4 id="代码-11"><a href="#代码-11" class="headerlink" title="代码"></a>代码</h4><p>把参数从第一个开始截取，然后调用apply</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">callIt</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> newArr = <span class="built_in">Array</span>.from(<span class="built_in">arguments</span>).slice(<span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> fn.apply(<span class="built_in">this</span>, newArr);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-40"><a href="#相关知识点-40" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>apply/arguments</li>
</ul>
<h3 id="43-二次封装函数"><a href="#43-二次封装函数" class="headerlink" title="43. 二次封装函数"></a>43. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/694afeb930f74392bda01a815219d81b">二次封装函数</a></h3><h4 id="题目描述-37"><a href="#题目描述-37" class="headerlink" title="题目描述"></a>题目描述</h4><p>实现函数 partialUsingArguments，调用之后满足如下条件：<br>1、返回一个函数 result<br>2、调用 result 之后，返回的结果与调用函数 fn 的结果一致<br>3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数<br>输入： 无  输出：无</p>
<h4 id="用call直接扩展运算符"><a href="#用call直接扩展运算符" class="headerlink" title="用call直接扩展运算符"></a>用call直接扩展运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partialUsingArguments</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> args = [].slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">result</span>(<span class="params">...newArgs</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.call(<span class="built_in">this</span>, ...args, ...newArgs);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="用apply接收数组"><a href="#用apply接收数组" class="headerlink" title="用apply接收数组"></a>用apply接收数组</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partialUsingArguments</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> args = [].slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">result</span>(<span class="params">...newArgs</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.apply(<span class="built_in">this</span>, args.concat(newArgs));</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind-3"><a href="#bind-3" class="headerlink" title="bind"></a>bind</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">partialUsingArguments</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> args = [].slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">result</span>(<span class="params">...newArgs</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> fn.bind(<span class="built_in">this</span>, ...args, ...newArgs)();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-41"><a href="#相关知识点-41" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>arguments/apply/call/bind</li>
</ul>
<h3 id="44-柯里化"><a href="#44-柯里化" class="headerlink" title="44. 柯里化"></a>44. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/bb78d69986794470969674a8b504ac00">柯里化</a></h3><h4 id="题目描述-38"><a href="#题目描述-38" class="headerlink" title="题目描述"></a>题目描述</h4><p>已知 fn 为一个预定义函数，实现函数 curryIt，调用之后满足如下条件：<br>1、返回一个函数 a，a 的 length 属性值为 1（即显式声明 a 接收一个参数）<br>2、调用 a 之后，返回一个函数 b, b 的 length 属性值为 1<br>3、调用 b 之后，返回一个函数 c, c 的 length 属性值为 1<br>4、调用 c 之后，返回的结果与调用 fn 的返回值一致<br>5、fn 的参数依次为函数 a, b, c 的调用参数<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span> (<span class="params">a, b, c</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a + b + c</span><br><span class="line">&#125;;</span><br><span class="line">curryIt(fn)(<span class="number">1</span>)(<span class="number">2</span>)(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">6</span></span><br></pre></td></tr></table></figure>

<h4 id="代码-12"><a href="#代码-12" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curryIt</span>(<span class="params">fn</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> length = fn.length;</span><br><span class="line">    <span class="keyword">let</span> args = [];</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> <span class="title">curried</span>(<span class="params">arg</span>) </span>&#123;</span><br><span class="line">        args.push(arg);</span><br><span class="line">        <span class="keyword">if</span> (args.length &lt; length) &#123; <span class="comment">// 如果传入参数数量不够，返回一个闭包，暂存传入的参数，并重新返回curry函数</span></span><br><span class="line">            <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">arg2</span>) </span>&#123;  </span><br><span class="line">                <span class="keyword">return</span> curried.call(<span class="built_in">this</span>, arg2);</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123; <span class="comment">// 判断当前函数传入的参数是否大于或等于fn需要参数的数量，如果是，直接执行fn</span></span><br><span class="line">            <span class="keyword">return</span> fn.apply(<span class="built_in">this</span>, args);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-42"><a href="#相关知识点-42" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>柯里化</li>
</ul>
<blockquote>
<p><a href="https://hxy1997.xyz/2021/04/22/js%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/#7-partial-amp-curry%EF%BC%88%E5%81%8F%E5%87%BD%E6%95%B0%E4%B8%8E%E6%9F%AF%E9%87%8C%E5%8C%96%EF%BC%89">js函数式编程 偏函数与柯里化</a></p>
</blockquote>
<ul>
<li>函数形参长度获取：fn.length</li>
</ul>
<h3 id="45-或运算"><a href="#45-或运算" class="headerlink" title="45. 或运算"></a>45. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/77f1e6e2f54044d0ad47ab14e3711489">或运算</a></h3><h4 id="题目描述-39"><a href="#题目描述-39" class="headerlink" title="题目描述"></a>题目描述</h4><p>返回参数 a 和 b 的逻辑或运算结果<br>输入： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span>, <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="直接或运算符"><a href="#直接或运算符" class="headerlink" title="直接或运算符"></a>直接或运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">or</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a || b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用位运算"><a href="#利用位运算" class="headerlink" title="利用位运算"></a>利用位运算</h4><p>位运算中的或运算，返回0或者1，需要转化类型为布尔值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">or</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a | b ? <span class="literal">true</span> : <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-43"><a href="#相关知识点-43" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>或运算</li>
</ul>
<blockquote>
<p>|| 运算符，a和b都为false，才是false，其中一个有true，就是false<br> | 运算符，是位运算，位置上都是0才返回0，位置上有一个1就返回1，如果返回需要布尔值，需要转化</p>
</blockquote>
<h3 id="46-且运算"><a href="#46-且运算" class="headerlink" title="46. 且运算"></a>46. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/608780935ae44babb9785485bb650a76">且运算</a></h3><h4 id="题目描述-40"><a href="#题目描述-40" class="headerlink" title="题目描述"></a>题目描述</h4><p>返回参数 a 和 b 的逻辑且运算结果<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span>, <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h4 id="直接且运算符"><a href="#直接且运算符" class="headerlink" title="直接且运算符"></a>直接且运算符</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">and</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a &amp;&amp; b;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用位运算-1"><a href="#利用位运算-1" class="headerlink" title="利用位运算"></a>利用位运算</h4><p>位运算的且运算符，返回 0 和 1，需要转化成布尔值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">and</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a &amp; b ? <span class="literal">true</span> : <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-44"><a href="#相关知识点-44" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>且运算</li>
</ul>
<blockquote>
<p>&amp;&amp; 运算符，a和b都为true，才是true，其中一个有false，就是false<br> &amp; 运算符，是位运算，位置上都是1才返回1，位置上有一个0就返回0，如果返回需要布尔值，需要转化</p>
</blockquote>
<h3 id="47-模块"><a href="#47-模块" class="headerlink" title="47. 模块"></a>47. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/48e53feaabe94506a61300edadb5496d">模块</a></h3><h4 id="题目描述-41"><a href="#题目描述-41" class="headerlink" title="题目描述"></a>题目描述</h4><p>完成函数 createModule，调用之后满足如下要求：<br>1、返回一个对象<br>2、对象的 greeting 属性值等于 str1， name 属性值等于 str2<br>3、对象存在一个 sayIt 方法，该方法返回的字符串为 greeting属性值 + ‘, ‘ + name属性值</p>
<h4 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createModule</span>(<span class="params">str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> obj = &#123;</span><br><span class="line">        greeting : str1,</span><br><span class="line">        name : str2,</span><br><span class="line">        sayIt :<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span>  <span class="built_in">this</span>.greeting + <span class="string">&#x27;, &#x27;</span> + <span class="built_in">this</span>.name;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createModule</span>(<span class="params">str1, str2</span>) </span>&#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">Obj</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.greeting = str1;</span><br><span class="line">        <span class="built_in">this</span>.name = str2;</span><br><span class="line">    &#125;</span><br><span class="line">    Obj.prototype.sayIt = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">this</span>.greeting + <span class="string">&#x27;, &#x27;</span> + <span class="built_in">this</span>.name;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> Obj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点：-1"><a href="#相关知识点：-1" class="headerlink" title="相关知识点："></a>相关知识点：</h4><ul>
<li>模块化、构造函数、对象</li>
</ul>
<h3 id="48-二进制转换"><a href="#48-二进制转换" class="headerlink" title="48. 二进制转换"></a>48. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/2c7f25d532aa4e20b67af9d3c93dc65f">二进制转换</a></h3><h4 id="题目描述-42"><a href="#题目描述-42" class="headerlink" title="题目描述"></a>题目描述</h4><p>获取数字 num 二进制形式第 bit 位的值。注意：<br>1、bit 从 1 开始<br>2、返回 0 或 1<br>3、举例：2 的二进制为 10，第 1 位为 0，第 2 位为 1<br>输入： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">128</span>，<span class="number">8</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span></span><br></pre></td></tr></table></figure>

<h4 id="位运算"><a href="#位运算" class="headerlink" title="位运算"></a>位运算</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">valueAtBit</span>(<span class="params">num, bit</span>) </span>&#123;</span><br><span class="line">    num &gt;&gt;= bit - <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">return</span> num &amp; <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">valueAtBit</span>(<span class="params">num, bit</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (num &gt;&gt; bit - <span class="number">1</span>) % <span class="number">2</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="while循环"><a href="#while循环" class="headerlink" title="while循环"></a>while循环</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">valueAtBit</span>(<span class="params">num, bit</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr = [];</span><br><span class="line">    <span class="keyword">while</span> (num) &#123;</span><br><span class="line">        arr.push(num % <span class="number">2</span>);</span><br><span class="line">        num = <span class="built_in">Math</span>.floor(num / <span class="number">2</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr[bit - <span class="number">1</span>];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-45"><a href="#相关知识点-45" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>二进制数值运算</li>
<li>取模</li>
<li>位运算符 左移 &gt;&gt; 右移 &lt;&lt; 无符号位右移 &lt;&lt;&lt;</li>
</ul>
<h3 id="49-二进制转换"><a href="#49-二进制转换" class="headerlink" title="49. 二进制转换"></a>49. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/4123561150114d119ba41f28219a454f">二进制转换</a></h3><h4 id="题目描述-43"><a href="#题目描述-43" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定二进制字符串，将其换算成对应的十进制数字<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;11000000&#x27;</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">192</span></span><br></pre></td></tr></table></figure>

<h4 id="parseInt函数"><a href="#parseInt函数" class="headerlink" title="parseInt函数"></a>parseInt函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">base10</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">parseInt</span>(str, <span class="number">2</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="每位乘二法"><a href="#每位乘二法" class="headerlink" title="每位乘二法"></a>每位乘二法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">base10</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> base = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = str.length - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">        <span class="keyword">if</span> (str[i] === <span class="string">&quot;1&quot;</span>) &#123;</span><br><span class="line">            res += base;</span><br><span class="line">        &#125;</span><br><span class="line">        base *= <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-46"><a href="#相关知识点-46" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>进制转换</li>
</ul>
<blockquote>
<p>二进制转十进制，从最高位开始乘2，十进制转二进制，除2取余后取逆向</p>
</blockquote>
<h3 id="50-二进制转换"><a href="#50-二进制转换" class="headerlink" title="50. 二进制转换"></a>50. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/7b74386695cc48349af37196f45e62a8">二进制转换</a></h3><h4 id="题目描述-44"><a href="#题目描述-44" class="headerlink" title="题目描述"></a>题目描述</h4><p>将给定数字转换成二进制字符串。如果字符串长度不足 8 位，则在前面补 0 到满8位。<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">65</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">01000001</span>(字符串)</span><br></pre></td></tr></table></figure>

<h4 id="使用API转化成二进制然后补空缺"><a href="#使用API转化成二进制然后补空缺" class="headerlink" title="使用API转化成二进制然后补空缺"></a>使用API转化成二进制然后补空缺</h4><p>尽量不要前面加字符串，性能消耗大</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">convertToBinary</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = num.toString(<span class="number">2</span>);</span><br><span class="line">    <span class="keyword">while</span> (res.length &lt; <span class="number">8</span>) &#123;</span><br><span class="line">        res = <span class="string">&#x27;0&#x27;</span> + res; </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="转化之后检查位"><a href="#转化之后检查位" class="headerlink" title="转化之后检查位"></a>转化之后检查位</h4><p>算法思维，推荐</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">convertToBinary</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr = [];</span><br><span class="line">    <span class="keyword">while</span> (num) &#123;</span><br><span class="line">        arr.push(num % <span class="number">2</span>);</span><br><span class="line">        num = num &gt;&gt; <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> str = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">let</span> len = arr.length &gt; <span class="number">8</span> ? arr.length : <span class="number">8</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = len - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">        str = arr[i] ? str + <span class="string">&quot;1&quot;</span> : str + <span class="string">&quot;0&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-47"><a href="#相关知识点-47" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>二进制转换</li>
</ul>
<h3 id="51-乘法"><a href="#51-乘法" class="headerlink" title="51. 乘法"></a>51. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/6429776e4630435cbc3eeb36bdf41f83">乘法</a></h3><h4 id="题目描述-45"><a href="#题目描述-45" class="headerlink" title="题目描述"></a>题目描述</h4><p>求 a 和 b 相乘的值，a 和 b 可能是小数，需要注意结果的精度问题<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3</span>, <span class="number">0.0001</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0.0003</span></span><br></pre></td></tr></table></figure>

<h4 id="确定小数的位数然后保证精度是多少位"><a href="#确定小数的位数然后保证精度是多少位" class="headerlink" title="确定小数的位数然后保证精度是多少位"></a>确定小数的位数然后保证精度是多少位</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">multiply</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arrA = a.toString().split(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> arrB = b.toString().split(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 第一个有小数位</span></span><br><span class="line">    <span class="keyword">if</span> (arrA[<span class="number">1</span>]) &#123;</span><br><span class="line">        count += arrA.length;</span><br><span class="line">        a = a * <span class="built_in">Math</span>.pow(<span class="number">10</span>, arrA.length);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 第二个数有小数位</span></span><br><span class="line">    <span class="keyword">if</span> (arrB[<span class="number">1</span>]) &#123;</span><br><span class="line">        count += arrB.length;</span><br><span class="line">        b = b * <span class="built_in">Math</span>.pow(<span class="number">10</span>, arrB.length);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> a * b * <span class="built_in">Math</span>.pow(<span class="number">10</span>, -count);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者直接简写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">multiply</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> strA = a.toString();</span><br><span class="line">    <span class="keyword">let</span> strB = b.toString();</span><br><span class="line">    <span class="comment">// 获取小数位数</span></span><br><span class="line">    aLen = strA.indexOf(<span class="string">&quot;.&quot;</span>) === -<span class="number">1</span> ? <span class="number">1</span> : <span class="built_in">Math</span>.pow(<span class="number">10</span>, strA.length - <span class="number">2</span>);</span><br><span class="line">    bLen = strB.indexOf(<span class="string">&quot;.&quot;</span>) === -<span class="number">1</span> ? <span class="number">1</span> : <span class="built_in">Math</span>.pow(<span class="number">10</span>, strB.length - <span class="number">2</span>);</span><br><span class="line">    <span class="keyword">return</span> (a * aLen) * (b * bLen) / aLen / bLen;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用toFixed函数"><a href="#利用toFixed函数" class="headerlink" title="利用toFixed函数"></a>利用toFixed函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">multiply</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arrA = a.toString().split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>] || <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">let</span> arrB = b.toString().split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>] || <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">let</span> fix = arrA.length + arrB.length;</span><br><span class="line">    <span class="keyword">return</span> (a * b).toFixed(fix);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-48"><a href="#相关知识点-48" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>javascript小数精度问题<blockquote>
<p>javascript的数值存储是双精度浮点数64位，根据IEEE 754标准，0-51为值，52-62位指数，63位是符号位。<br>二进制浮点数表示法对0.1这样的有误差。<br>解决方法就是先升幂再降幂。</p>
</blockquote>
</li>
</ul>
<h3 id="52-改变上下文"><a href="#52-改变上下文" class="headerlink" title="52. 改变上下文"></a>52. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/dfcc28bf243642b795eaf5a2a621acc5">改变上下文</a></h3><h4 id="题目描述-46"><a href="#题目描述-46" class="headerlink" title="题目描述"></a>题目描述</h4><p>将函数 fn 的执行上下文改为 obj，返回 fn 执行后的值<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">alterContext(</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="built_in">this</span>.greeting + <span class="string">&#x27;, &#x27;</span> + <span class="built_in">this</span>.name + <span class="string">&#x27;!&#x27;</span>;</span><br><span class="line"> &#125;, </span><br><span class="line"> &#123;</span><br><span class="line">     name: <span class="string">&#x27;Rebecca&#x27;</span>,</span><br><span class="line">     greeting: <span class="string">&#x27;Yo&#x27;</span> </span><br><span class="line"> &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Yo, Rebecca!</span><br></pre></td></tr></table></figure>

<h4 id="call-3"><a href="#call-3" class="headerlink" title="call"></a>call</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">alterContext</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.call(obj);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="apply-3"><a href="#apply-3" class="headerlink" title="apply"></a>apply</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">alterContext</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.apply(obj);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="bind-4"><a href="#bind-4" class="headerlink" title="bind"></a>bind</h4><p>bind()返回的是一个函数，所以需要立即执行。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">alterContext</span>(<span class="params">fn, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> fn.bind(obj)();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-49"><a href="#相关知识点-49" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>call/apply/bind</li>
</ul>
<h3 id="53-批量改变对象的属性"><a href="#53-批量改变对象的属性" class="headerlink" title="53. 批量改变对象的属性"></a>53. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/4f7d25a30eb1463cbf1daac39ec04f8d">批量改变对象的属性</a></h3><h4 id="题目描述-47"><a href="#题目描述-47" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定一个构造函数 constructor，请完成 alterObjects 方法，将 constructor 的所有实例的 greeting 属性指向给定的 greeting 变量。<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> C = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line"> <span class="built_in">this</span>.name = name;</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">&#125;;   </span><br><span class="line"><span class="keyword">var</span> obj1 = <span class="keyword">new</span> C(<span class="string">&#x27;Rebecca&#x27;</span>);   </span><br><span class="line">alterObjects(C, <span class="string">&#x27;What\&#x27;s up&#x27;</span>);</span><br><span class="line">obj1.greeting;  </span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">What’s up</span><br></pre></td></tr></table></figure>

<h4 id="原型对象上添加属性"><a href="#原型对象上添加属性" class="headerlink" title="原型对象上添加属性"></a>原型对象上添加属性</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">alterObjects</span>(<span class="params">constructor, greeting</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title">constructor</span>.<span class="title">prototype</span>.<span class="title">greeting</span> = <span class="title">greeting</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-50"><a href="#相关知识点-50" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>原型链</li>
</ul>
<h3 id="54-属性遍历"><a href="#54-属性遍历" class="headerlink" title="54. 属性遍历"></a>54. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0158a4f165154f2eaf27d1907aa55e57">属性遍历</a></h3><h4 id="题目描述-48"><a href="#题目描述-48" class="headerlink" title="题目描述"></a>题目描述</h4><p>找出对象 obj 不在原型链上的属性(注意这题测试例子的冒号后面也有一个空格~)<br>1、返回数组，格式为 key: value<br>2、结果数组不要求顺序<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> C = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.foo = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line">    <span class="built_in">this</span>.baz = <span class="string">&#x27;bim&#x27;</span>;</span><br><span class="line">&#125;; </span><br><span class="line">C.prototype.bop = <span class="string">&#x27;bip&#x27;</span>; </span><br><span class="line">iterate(<span class="keyword">new</span> C());</span><br></pre></td></tr></table></figure>

<p>输出 ：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">&quot;foo: bar&quot;</span>, <span class="string">&quot;baz: bim&quot;</span>]</span><br></pre></td></tr></table></figure>

<h4 id="for循环"><a href="#for循环" class="headerlink" title="for循环"></a>for循环</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">iterate</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.hasOwnProperty(key)) res.push(key + <span class="string">&#x27;: &#x27;</span> + obj[key]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="forEach或-map"><a href="#forEach或-map" class="headerlink" title="forEach或 map"></a>forEach或 map</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">iterate</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="built_in">Object</span>.getOwnPropertyNames(obj).forEach(<span class="function"><span class="params">value</span> =&gt;</span> res.push(<span class="string">`<span class="subst">$&#123;value&#125;</span>: <span class="subst">$&#123;obj[value]&#125;</span>`</span>));</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">iterate</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Object</span>.getOwnPropertyNames(obj).map(<span class="function"><span class="params">value</span> =&gt;</span> <span class="string">`<span class="subst">$&#123;value&#125;</span>: <span class="subst">$&#123;obj[value]&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-51"><a href="#相关知识点-51" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>Object.getOwnPropertyNames(obj)， 获取所有的对象自身属性</li>
</ul>
<h3 id="55-判断是否包含数字"><a href="#55-判断是否包含数字" class="headerlink" title="55. 判断是否包含数字"></a>55. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0fcb4eb9306d4bec837d0037fe39bcf7">判断是否包含数字</a></h3><h4 id="题目描述-49"><a href="#题目描述-49" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否包含数字，包含返回 true，否则返回 false<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">‘abc123’ </span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">containsNumber</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/\d/</span>.test(str);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="字符串比较ASCII码"><a href="#字符串比较ASCII码" class="headerlink" title="字符串比较ASCII码"></a>字符串比较ASCII码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">containsNumber</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; str.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span>(str[i] &gt;= <span class="string">&#x27;0&#x27;</span> &amp;&amp; str[i] &lt;= <span class="string">&#x27;9&#x27;</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="利用隐式类型转化"><a href="#利用隐式类型转化" class="headerlink" title="利用隐式类型转化"></a>利用隐式类型转化</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">containsNumber</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; str.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span>(str[i] &gt;= <span class="number">0</span> || str[i] &lt;= <span class="number">9</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-52"><a href="#相关知识点-52" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>字符串比较ASCII码</li>
</ul>
<blockquote>
<p>字符串比较会比较他们的ASCII码值，数字是连续的ASCII码，0123456789分别是48-57，在这个范围内的就可以。</p>
</blockquote>
<ul>
<li>隐式类型转化</li>
</ul>
<blockquote>
<p>数字字符串和数字比较，会隐式转化成数字，字符串和数字比较，会转化成数字NaN，和数字比较返回false，所以这种方式也可以找到字符串中是否有数字。</p>
</blockquote>
<ul>
<li>正则表达式</li>
</ul>
<h3 id="56-检查重复字符串"><a href="#56-检查重复字符串" class="headerlink" title="56. 检查重复字符串"></a>56. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/5ef31f11adf64d9fb18d74860e9ab873">检查重复字符串</a></h3><h4 id="题目描述-50"><a href="#题目描述-50" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否包含连续重复的字母（a-zA-Z），包含返回 true，否则返回 false<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">‘rattler’</span><br></pre></td></tr></table></figure>

<p>输出： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="双指针"><a href="#双指针" class="headerlink" title="双指针"></a>双指针</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">containsRepeatingLetter</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 如果字符串长度小于2直接返回false</span></span><br><span class="line">    <span class="keyword">if</span> (str.length &lt; <span class="number">2</span>) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    <span class="comment">// 左右指针</span></span><br><span class="line">    <span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> right = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">while</span>(str[right]) &#123;</span><br><span class="line">        <span class="comment">// 如果左右相等且都是a-z范围的就返回true</span></span><br><span class="line">        <span class="keyword">if</span>(str[left++] === str[right++] &amp;&amp; str[left].toLowerCase() &gt;= <span class="string">&#x27;a&#x27;</span> &amp;&amp; str[left].toLowerCase() &lt;= <span class="string">&#x27;z&#x27;</span> &amp;&amp; str[right].toLowerCase() &gt;= <span class="string">&#x27;a&#x27;</span> &amp;&amp; str[right].toLowerCase() &lt;= <span class="string">&#x27;z&#x27;</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 否则返回false</span></span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="正则表达式-1"><a href="#正则表达式-1" class="headerlink" title="正则表达式"></a>正则表达式</h4><p>小括号表示分组，\1表示引用第一个分组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">containsRepeatingLetter</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/([a-zA-Z])\1/</span>.test(str);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-53"><a href="#相关知识点-53" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>双指针(算法思维)</li>
<li>正则表达式</li>
</ul>
<h3 id="57-判断是否以元音字母结尾"><a href="#57-判断是否以元音字母结尾" class="headerlink" title="57. 判断是否以元音字母结尾"></a>57. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/c141ec7458f244a1ba1bb334c71e0f27">判断是否以元音字母结尾</a></h3><h4 id="题目描述-51"><a href="#题目描述-51" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否以元音字母结尾<br>1、元音字母包括 a，e，i，o，u，以及对应的大写<br>2、包含返回 true，否则返回 false<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">‘gorilla’ </span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="正则表达式-2"><a href="#正则表达式-2" class="headerlink" title="正则表达式"></a>正则表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">endsWithVowel</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/[a,e,i,o,u]$/i</span>.test(str);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="indexOf或includes"><a href="#indexOf或includes" class="headerlink" title="indexOf或includes"></a>indexOf或includes</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">endsWithVowel</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;i&#x27;</span>,<span class="string">&#x27;o&#x27;</span>,<span class="string">&#x27;u&#x27;</span>].indexOf(str.slice(-<span class="number">1</span>).toLowerCase()) === -<span class="number">1</span> ? <span class="literal">false</span>: <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">endsWithVowel</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;i&#x27;</span>,<span class="string">&#x27;o&#x27;</span>,<span class="string">&#x27;u&#x27;</span>].includes(str.slice(-<span class="number">1</span>).toLowerCase());</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-54"><a href="#相关知识点-54" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>字符串方法slice，toLowerCase</li>
<li>数组方法indexOf，includes</li>
<li>正则表达式</li>
</ul>
<h3 id="58-获取指定字符串"><a href="#58-获取指定字符串" class="headerlink" title="58. 获取指定字符串"></a>58. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/4ec56ad04a9a4402a01e50a390a8060a">获取指定字符串</a></h3><h4 id="题目描述-52"><a href="#题目描述-52" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否包含 连续3个数字<br>1、如果包含，返回最先出现的 3 个数字的字符串<br>2、如果不包含，返回 false<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">‘<span class="number">9876543</span>’</span><br></pre></td></tr></table></figure>

<p>输出： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">987</span></span><br></pre></td></tr></table></figure>

<p>PS: 这个题我们理解的是三个连续递增的数字，但是题的意思是连续的数字即可。</p>
<h4 id="计数器-1"><a href="#计数器-1" class="headerlink" title="计数器"></a>计数器</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">captureThreeNumbers</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> start = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> count = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; str.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!<span class="built_in">isNaN</span>(str[i])) &#123;</span><br><span class="line">            count++;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            count = <span class="number">0</span>;</span><br><span class="line">            start = i + <span class="number">1</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> count &gt;= <span class="number">3</span> ? str[start] + str[start + <span class="number">1</span>] + str[start + <span class="number">2</span>] : <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>如果是连续递增的数字，要使用双指针这样实现：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">captureThreeNumbers</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> right = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (str[right + <span class="number">1</span>] !== <span class="literal">undefined</span>) &#123;</span><br><span class="line">        <span class="comment">// 保证右指针连续，且属于数字，右指针往过移动</span></span><br><span class="line">        <span class="keyword">if</span> (</span><br><span class="line">            <span class="built_in">Math</span>.abs(str[right + <span class="number">1</span>] - str[right]) === <span class="number">1</span> &amp;&amp;</span><br><span class="line">            str[right] &gt;= <span class="number">0</span> &amp;&amp;</span><br><span class="line">            str[right] &lt;= <span class="number">9</span></span><br><span class="line">        ) &#123;</span><br><span class="line">            right++;</span><br><span class="line">            <span class="comment">// 如果小于3，左指针就去右指针右边</span></span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (right - left + <span class="number">1</span> &lt; <span class="number">3</span>) &#123;</span><br><span class="line">            left = ++right;</span><br><span class="line">            <span class="comment">// 大于3直接返回</span></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> str.substr(left, <span class="number">3</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 循环结果，如果大于3就返回，否则返回false</span></span><br><span class="line">    <span class="keyword">return</span> right - left + <span class="number">1</span> &gt;= <span class="number">3</span> ? str.substr(left, <span class="number">3</span>) : <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="正则表达式-3"><a href="#正则表达式-3" class="headerlink" title="正则表达式"></a>正则表达式</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">captureThreeNumbers</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr = str.match(<span class="regexp">/\d&#123;3&#125;/</span>);</span><br><span class="line">    <span class="keyword">if</span> (arr) &#123;</span><br><span class="line">        <span class="keyword">return</span> arr[<span class="number">0</span>];</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>简写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">captureThreeNumbers</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> arr = str.match(<span class="regexp">/\d&#123;3&#125;/</span>);</span><br><span class="line">    <span class="keyword">return</span> arr ? arr[<span class="number">0</span>] : <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-55"><a href="#相关知识点-55" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>计数器</li>
<li>正则表达式</li>
<li>双指针(算法思维) + 判断连续数字</li>
</ul>
<h3 id="59-判断是否符合指定格式"><a href="#59-判断是否符合指定格式" class="headerlink" title="59. 判断是否符合指定格式"></a>59. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/eb86f08c478749868a01861f5ddad28b">判断是否符合指定格式</a></h3><h4 id="题目描述-53"><a href="#题目描述-53" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否符合如下格式<br>1、XXX-XXX-XXXX<br>2、其中 X 为 Number 类型<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">‘<span class="number">800</span>-<span class="number">555</span>-<span class="number">1212</span>’</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="代码-13"><a href="#代码-13" class="headerlink" title="代码"></a>代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">matchesPattern</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/^\d&#123;3&#125;-\d&#123;3&#125;-\d&#123;4&#125;$/</span>.test(str);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-56"><a href="#相关知识点-56" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>匹配或者判断什么格式就优先考虑正则</li>
</ul>
<h3 id="60-判断是否符合-USD-格式"><a href="#60-判断是否符合-USD-格式" class="headerlink" title="60. 判断是否符合 USD 格式"></a>60. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/667dd00250d04d06989ed1b69102c9ab">判断是否符合 USD 格式</a></h3><h4 id="题目描述-54"><a href="#题目描述-54" class="headerlink" title="题目描述"></a>题目描述</h4><p>给定字符串 str，检查其是否符合美元书写格式<br>1、以$ 开始<br>2、整数部分，从个位起，满 3 个数字用 , 分隔<br>3、如果为小数，则小数部分长度为 2<br>4、正确的格式如：$1,023,032.03 或者 $2.03，错误的格式如：$3,432,12.12 或者 $34,344.3<br>输入：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;$20,933,209.93&#x27;</span></span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="代码-14"><a href="#代码-14" class="headerlink" title="代码"></a>代码</h4><p>正则表达式，从左往右写，依次匹配</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isUSD</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="regexp">/^\$[\d]&#123;1,3&#125;(,\d&#123;3&#125;)*(\.\d&#123;2&#125;)?$/</span>.test(str);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-57"><a href="#相关知识点-57" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>正则表达式</li>
</ul>
<h3 id="61-购物车"><a href="#61-购物车" class="headerlink" title="61. 购物车"></a>61. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/3b4a342351ce483e813e5588446fc1f8">购物车</a></h3><h4 id="题目描述-55"><a href="#题目描述-55" class="headerlink" title="题目描述"></a>题目描述</h4><p>HTML模块为一个简化版的购物车，tbody为商品列表，tfoot为统计信息，系统会随机在列表中生成一些初始商品信息<br>1、请完成add函数，在列表后面显示items商品信息。参数items为{name: String, price: Number}组成的数组<br>2、请完成bind函数，点击每一行的删除按钮(包括通过add增加的行)，从列表中删除对应行<br>3、请注意同步更新统计信息，价格保留小数点后两位<br>4、列表和统计信息格式请与HTML示例保持一致<br>5、不要直接手动修改HTML中的代码<br>6、不要使用第三方库</p>
<h4 id="代码-15"><a href="#代码-15" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">&quot;jsTrolley&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>名称<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>价格<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>产品1<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>10.00<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0);&quot;</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>产品2<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>30.20<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0);&quot;</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>产品3<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>20.50<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:void(0);&quot;</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tfoot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>总计<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">&quot;2&quot;</span>&gt;</span>60.70(3件商品)<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tfoot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span> &#123;</span><br><span class="line">    <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">table-layout</span>: fixed;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">thead</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#3d444c</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ffffff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">td</span>,</span><br><span class="line"><span class="selector-tag">th</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e1e1e1</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在列表后面显示items商品信息</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">items</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// items [&#123;name, price&#125;]</span></span><br><span class="line">    <span class="comment">// 1.获取表单父节点和总计</span></span><br><span class="line">    <span class="keyword">var</span> tbody = getTbody();</span><br><span class="line">    <span class="keyword">var</span> tfoot = getTfoot();</span><br><span class="line">    <span class="comment">// 2.获取初始数据</span></span><br><span class="line">    <span class="keyword">var</span> num = tbody.children.length;</span><br><span class="line">    <span class="keyword">var</span> total = tfoot.innerText.match(<span class="regexp">/^.*\t(\d*\.?\d*)\(.*\)$/</span>)[<span class="number">1</span>];</span><br><span class="line">    <span class="keyword">var</span> price = <span class="built_in">parseFloat</span>(total);</span><br><span class="line">    <span class="comment">// 3.创建子节点</span></span><br><span class="line">    <span class="comment">// 产品行</span></span><br><span class="line">    <span class="keyword">var</span> tr = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> items) &#123;</span><br><span class="line">        price = <span class="built_in">parseFloat</span>((price + items[i].price).toFixed(<span class="number">2</span>));</span><br><span class="line">        tr += <span class="string">`&lt;tr&gt;</span></span><br><span class="line"><span class="string">            &lt;td&gt;<span class="subst">$&#123;items[i].name&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">            &lt;td&gt;<span class="subst">$&#123;items[i].price.toFixed(<span class="number">2</span>)&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">            &lt;td&gt;&lt;a href=&quot;javascript:void(0);&quot;&gt;删除&lt;/a&gt;&lt;/td&gt;</span></span><br><span class="line"><span class="string">        &lt;/tr&gt;`</span>;</span><br><span class="line">        num++;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 总计行</span></span><br><span class="line">    <span class="keyword">var</span> tf = <span class="string">`&lt;tr&gt;&lt;th&gt;总计&lt;/th&gt;&lt;td colspan=&quot;2&quot;&gt;<span class="subst">$&#123;price.toFixed(</span></span></span><br><span class="line"><span class="string"><span class="subst">        <span class="number">2</span></span></span></span><br><span class="line"><span class="string"><span class="subst">    )&#125;</span>(<span class="subst">$&#123;num&#125;</span>件商品)&lt;/td&gt;&lt;/tr&gt;`</span>;</span><br><span class="line">    <span class="comment">// 4.将新增的数据添加进去</span></span><br><span class="line">    tfoot.innerHTML = tf;</span><br><span class="line">    tbody.innerHTML = tbody.innerHTML + tr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从列表中删除对应行</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bind</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1.获取表单父节点和总计</span></span><br><span class="line">    <span class="keyword">var</span> tbody = getTbody();</span><br><span class="line">    <span class="keyword">var</span> tfoot = getTfoot();</span><br><span class="line">    <span class="comment">// 2.通过代理模式添加点击事件</span></span><br><span class="line">    tbody.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function">(<span class="params">event</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> num = tbody.children.length;</span><br><span class="line">        <span class="keyword">if</span> (event.target.tagName == <span class="string">&quot;A&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 获取数据</span></span><br><span class="line">            <span class="keyword">var</span> price = event.target.parentElement.parentElement.innerText.match(</span><br><span class="line">                /^.*\t(\d*\.?\d*)\t.*$/</span><br><span class="line">            )[<span class="number">1</span>];</span><br><span class="line">            <span class="comment">// 修改数据</span></span><br><span class="line">            <span class="keyword">var</span> total = tfoot.innerText.match(<span class="regexp">/^.*\t(\d*\.?\d*)\(.*\)$/</span>)[<span class="number">1</span>];</span><br><span class="line">            price = <span class="built_in">parseFloat</span>((<span class="built_in">parseFloat</span>(total) - price).toFixed(<span class="number">2</span>));</span><br><span class="line">            <span class="keyword">var</span> tf = <span class="string">`</span></span><br><span class="line"><span class="string">                &lt;tr&gt;&lt;th&gt;总计&lt;/th&gt;&lt;td colspan=&quot;2&quot;&gt;<span class="subst">$&#123;price.toFixed(<span class="number">2</span>)&#125;</span>(<span class="subst">$&#123;</span></span></span><br><span class="line"><span class="string"><span class="subst">                num - <span class="number">1</span></span></span></span><br><span class="line"><span class="string"><span class="subst">                &#125;</span>件商品)&lt;/td&gt;&lt;/tr&gt;</span></span><br><span class="line"><span class="string">            `</span>;</span><br><span class="line">            tfoot.innerHTML = tf;</span><br><span class="line">            <span class="comment">// 删除节点</span></span><br><span class="line">            event.target.parentElement.parentElement.remove();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取表单父节点</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getTbody</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsTrolley&quot;</span>).getElementsByTagName(<span class="string">&quot;tbody&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取总计信息</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getTfoot</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;tfoot&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-58"><a href="#相关知识点-58" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>正则表达式</li>
<li>小数</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="62-表格排序"><a href="#62-表格排序" class="headerlink" title="62. 表格排序"></a>62. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/a23d261947194d5d8e2687aa873d96e4">表格排序</a></h3><h4 id="题目描述-56"><a href="#题目描述-56" class="headerlink" title="题目描述"></a>题目描述</h4><p>系统会在tbody中随机生成一份产品信息表单，如html所示。<br>请完成 sort 函数，根据参数的要求对表单所有行进行重新排序。<br>1、type为id、price或者sales，分别对应第1 ~ 3列<br>2、order为asc或者desc，asc表示升序，desc为降序<br>3、例如 sort(‘price’, ‘asc’) 表示按照price列从低到高排序<br>4、所有表格内容均为数字，每一列数字均不会重复<br>5、不要使用第三方插件</p>
<h4 id="代码-16"><a href="#代码-16" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>id<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>price<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>sales<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tbody</span> <span class="attr">id</span>=<span class="string">&quot;jsList&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>1<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>10.0<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>800<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>30.0<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>600<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>3<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>20.5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>700<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>4<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>40.5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>500<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>60.5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>300<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>6<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>50.0<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>400<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>7<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>70.0<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>200<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>8<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>80.5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>100<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span> &#123;</span><br><span class="line">    <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">table-layout</span>: fixed;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">thead</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#3d444c</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ffffff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">td</span>, <span class="selector-tag">th</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e1e1e1</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">type, order</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// type为id、price或者sales;</span></span><br><span class="line">    <span class="comment">// 1.获取父节点</span></span><br><span class="line">    <span class="keyword">var</span> jsList = <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsList&quot;</span>);</span><br><span class="line">    <span class="comment">// 2.获取数据</span></span><br><span class="line">    <span class="keyword">var</span> trs = jsList.getElementsByTagName(<span class="string">&quot;tr&quot;</span>);</span><br><span class="line">    <span class="comment">// 3.遍历获取数组</span></span><br><span class="line">    <span class="keyword">var</span> arrTrs = <span class="built_in">Array</span>.prototype.slice.call(trs);</span><br><span class="line">    <span class="keyword">var</span> index = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">if</span> (type == <span class="string">&quot;id&quot;</span>) &#123;</span><br><span class="line">        index = <span class="number">0</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (type == <span class="string">&quot;price&quot;</span>) &#123;</span><br><span class="line">        index = <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (type == <span class="string">&quot;sales&quot;</span>) &#123;</span><br><span class="line">        index = <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 4.重新排列--js sort()</span></span><br><span class="line">    arrTrs.sort(<span class="function"><span class="keyword">function</span> (<span class="params">value1, value2</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> td1 = value1.getElementsByTagName(<span class="string">&quot;td&quot;</span>)[index].innerHTML;</span><br><span class="line">        <span class="keyword">var</span> td2 = value2.getElementsByTagName(<span class="string">&quot;td&quot;</span>)[index].innerHTML;</span><br><span class="line">        <span class="keyword">if</span> (order == <span class="string">&quot;asc&quot;</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> td1 - td2;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (order == <span class="string">&quot;desc&quot;</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> td2 - td1;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 5.更新节点</span></span><br><span class="line">    arrTrs.forEach(<span class="function">(<span class="params">tr</span>) =&gt;</span> &#123;</span><br><span class="line">        jsList.appendChild(tr);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-59"><a href="#相关知识点-59" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>排序（高阶函数）</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="63-替换链接"><a href="#63-替换链接" class="headerlink" title="63. 替换链接"></a>63. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/4578a70b955848ff8e95c1f88c94c1ba">替换链接</a></h3><h4 id="题目描述-57"><a href="#题目描述-57" class="headerlink" title="题目描述"></a>题目描述</h4><p>页面中存在id=jsContainer的DOM元素。<br>该DOM元素内会给出一段随机文本，可能包含一些链接，比如<a target="_blank" rel="noopener" href="https://www.baidu.com,或者/">https://www.baidu.com，或者</a> <a target="_blank" rel="noopener" href="http://www.baidu.com/?from=onlineExam%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%87%BA%E7%8E%B0%E9%93%BE%E6%8E%A5%E6%96%87%E6%9C%AC%EF%BC%8C%E8%AF%B7%E7%BB%99%E8%AF%A5%E9%93%BE%E6%8E%A5%E6%96%87%E6%9C%AC%E5%8A%A0%E4%B8%8A%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%EF%BC%8C%E7%94%A8%E6%88%B7%E7%82%B9%E5%87%BB%E5%90%8E%E8%83%BD%E7%9B%B4%E6%8E%A5%E5%9C%A8%E6%96%B0%E7%AA%97%E5%8F%A3%E4%B8%AD%E6%89%93%E5%BC%80%E8%AF%A5%E9%93%BE%E6%8E%A5%E3%80%82">www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。</a><br>请完成 link 函数，完成该功能<br>1、container只有纯文本内容，不包含其他dom元素<br>2、识别所有以http://、https://或者www.开始的链接<br>3、所有www.开头的链接，默认使用 http 协议<br>4、所有链接在新窗口打开</p>
<h4 id="代码-17"><a href="#代码-17" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsContainer&quot;</span>&gt;</span></span><br><span class="line">这里会给出一段随机文本，可能包含一些链接，比如https://www.baidu.com，或者 www.baidu.com?from=onlineExam，如果出现链接文本，请给该链接文本加上链接标签，用户点击后能直接在新窗口中打开该链接。</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00bc9b</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">link</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1.获取元素</span></span><br><span class="line">    <span class="keyword">const</span> jsContainer = <span class="built_in">document</span>.querySelector(<span class="string">&quot;#jsContainer&quot;</span>);</span><br><span class="line">    <span class="comment">// 2.识别所有以http://、https://或者www.开始的网页链接的正则表达式</span></span><br><span class="line">    <span class="keyword">let</span> reg =</span><br><span class="line">        /(https?:\/\/)?(www\.\w+(\.(com|cn))*([?]\w+=\w*(&amp;\w+=\w*)*)?(#\w+)?)/g;</span><br><span class="line">    <span class="comment">// 3.为所有的网页链接标签添加网址</span></span><br><span class="line">    jsContainer.innerHTML = jsContainer.innerHTML.replace(</span><br><span class="line">        reg,</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">...args</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (args[<span class="number">1</span>]) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`&lt;a target=&quot;_blank&quot; href=&quot;<span class="subst">$&#123;args[<span class="number">1</span>]&#125;</span><span class="subst">$&#123;args[<span class="number">2</span>]&#125;</span>&quot;&gt;<span class="subst">$&#123;args[<span class="number">0</span>]&#125;</span>&lt;/a&gt;`</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`&lt;a target=&quot;_blank&quot; href=&quot;http://<span class="subst">$&#123;args[<span class="number">2</span>]&#125;</span>&quot;&gt;<span class="subst">$&#123;args[<span class="number">0</span>]&#125;</span>&lt;/a&gt;`</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-60"><a href="#相关知识点-60" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>正则表达式</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="64-倒计时"><a href="#64-倒计时" class="headerlink" title="64. 倒计时"></a>64. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/d86defce50ea45dd92c7a4fbde17d64b">倒计时</a></h3><h4 id="题目描述-58"><a href="#题目描述-58" class="headerlink" title="题目描述"></a>题目描述</h4><p>倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分<br>1、second函数的输入为整数，返回{day: Int, hour: Int, min: Int, second: Int}<br>2、render函数的输入为second函数的输出，将数据在页面对应的DOM元素上显示出来，格式如html所示<br>3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）<br>4、数值不足两位，前面补充0</p>
<h4 id="代码-18"><a href="#代码-18" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsCountdown&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>01天<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>02:<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>03:<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>04<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.hide</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 计算倒计时的天/小时/分钟/秒</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">second</span>(<span class="params">second</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 计算剩余时间,保证返回精确的剩余时间</span></span><br><span class="line">    <span class="keyword">var</span> day = <span class="built_in">Math</span>.floor(second / (<span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>));</span><br><span class="line">    second -= day * (<span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>);</span><br><span class="line">    <span class="keyword">var</span> hour = <span class="built_in">Math</span>.floor(second / (<span class="number">60</span> * <span class="number">60</span>));</span><br><span class="line">    second -= hour * (<span class="number">60</span> * <span class="number">60</span>);</span><br><span class="line">    <span class="keyword">var</span> min = <span class="built_in">Math</span>.floor(second / <span class="number">60</span>);</span><br><span class="line">    second -= min * <span class="number">60</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        day,</span><br><span class="line">        hour,</span><br><span class="line">        min,</span><br><span class="line">        second,</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">render</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1.获取倒计时计数器的位置</span></span><br><span class="line">    <span class="keyword">var</span> jsCountdown = <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsCountdown&quot;</span>);</span><br><span class="line">    <span class="comment">// 2.根据剩余时间改变对应元素内容</span></span><br><span class="line">    <span class="keyword">var</span> times = jsCountdown.children;</span><br><span class="line">    <span class="keyword">if</span> (data.day == <span class="number">0</span>) &#123;</span><br><span class="line">        times[<span class="number">0</span>].className = <span class="string">&quot;hide&quot;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        times[<span class="number">0</span>].innerHTML = format(data.day) + <span class="string">&quot;天&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    times[<span class="number">1</span>].innerHTML = format(data.hour) + <span class="string">&quot;:&quot;</span>;</span><br><span class="line">    times[<span class="number">2</span>].innerHTML = format(data.min) + <span class="string">&quot;:&quot;</span>;</span><br><span class="line">    times[<span class="number">3</span>].innerHTML = format(data.second);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 格式化数据</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">format</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> result = num.toString();</span><br><span class="line">        <span class="keyword">if</span> (num &lt; <span class="number">10</span> &amp;&amp; num &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">            result = <span class="string">&quot;0&quot;</span> + result;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-61"><a href="#相关知识点-61" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>时间的计算</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="65-拖拽拼图"><a href="#65-拖拽拼图" class="headerlink" title="65. 拖拽拼图"></a>65. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/277931dc9ca345e8a3fa7260c7699940">拖拽拼图</a></h3><h4 id="题目描述-59"><a href="#题目描述-59" class="headerlink" title="题目描述"></a>题目描述</h4><p>页面左边为可以使用的拼图，右边为拼图的位置，两者通过序列号对应，页面元素均已经标记id。<br>请完成drag函数，当执行drag后，可以实现如下需求<br>1.用户可以把左边的拼图块全部移到右边对应位置，全部移动完成要求弹出提示框显示拼图成功（提示框为id标记为success的div标签）<br>2.如果在移动途中松开鼠标，则<br>    2.1 左侧拼图模块如果没有和目标位置发生重合，拼图模块需要回到原来的位置<br>    2.2 如果拼图模块和目标位置有2/3以上重合则认为拼图成功，此时拼图模块移动到目标位置，并且无法再次拖动<br>3.在移动时鼠标需要一直在拼图模块上，否则拼图模块停止移动<br>4.当前页面默认已经调用drag函数，请不要删除该调用语句<br>5.请不要手动修改html和css<br>6.不要使用第三方插件<br>7.请使用ES5语法</p>
<h4 id="代码-19"><a href="#代码-19" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;title&#x27;</span>&gt;</span>将左侧模块移动到右侧对应位置完成拼图<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--拼图模块--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos src&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;src-1&#x27;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos src&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;src-2&#x27;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos src&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;src-3&#x27;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--拼图目标位置--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos dest&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;dest-1&#x27;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos dest&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;dest-2&#x27;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;pos dest&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;dest-3&#x27;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&#x27;success&#x27;</span> <span class="attr">id</span>=<span class="string">&#x27;success&#x27;</span>&gt;</span>拼图完成<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">min-width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: center;</span><br><span class="line">    <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pos</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">color</span>: black;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    user-select: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.dest</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: black;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">border-style</span>: solid;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#src-1</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#src-2</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#src-3</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#dest-1</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#dest-2</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#dest-3</span> &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.success</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">background-color</span>: black;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.title</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br></pre></td><td class="code"><pre><span class="line">drag();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可能被用到的一些点</span></span><br><span class="line"><span class="comment">// element.style.top element.style.left</span></span><br><span class="line"><span class="comment">// element.offsetTop element.offsetLeft</span></span><br><span class="line"><span class="comment">// Math.abs</span></span><br><span class="line"><span class="comment">// document.body.onmouseup</span></span><br><span class="line"><span class="comment">// document.body.onmouseleave</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">drag</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 3个源元素</span></span><br><span class="line">    <span class="keyword">var</span> src1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;src-1&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> src2 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;src-2&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> src3 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;src-3&quot;</span>);</span><br><span class="line">    <span class="comment">// 3个目标元素</span></span><br><span class="line">    <span class="keyword">var</span> dest1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;dest-1&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> dest2 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;dest-2&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> dest3 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;dest-3&quot;</span>);</span><br><span class="line">    <span class="comment">// 成功元素</span></span><br><span class="line">    <span class="keyword">var</span> success = <span class="built_in">document</span>.getElementById(<span class="string">&quot;success&quot;</span>);</span><br><span class="line">    <span class="comment">// 成功次数，三个都放上就弹出成功框</span></span><br><span class="line">    <span class="keyword">var</span> successNum = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 移动元素对象</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">MoveEle</span>(<span class="params">ele</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.ele = ele;</span><br><span class="line">        <span class="built_in">this</span>.mouse = &#123;</span><br><span class="line">            <span class="comment">// 鼠标距离该元素左上角的x和y距离</span></span><br><span class="line">            mouseEleClient: &#123;</span><br><span class="line">                t: <span class="number">0</span>,</span><br><span class="line">                l: <span class="number">0</span>,</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">// 鼠标在元素上按下时，替换为true</span></span><br><span class="line">            mouseSuo: <span class="literal">false</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// 移动到目标位置永久锁住</span></span><br><span class="line">        <span class="built_in">this</span>.isTarget = <span class="literal">true</span>;</span><br><span class="line">        <span class="comment">// 初始左边界位置</span></span><br><span class="line">        <span class="built_in">this</span>.offsetLeft = ele.offsetLeft;</span><br><span class="line">        <span class="comment">// 初始上边界位置</span></span><br><span class="line">        <span class="built_in">this</span>.offsetTop = ele.offsetTop;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 初始化移动元素</span></span><br><span class="line">    MoveEle.prototype.init = <span class="function"><span class="keyword">function</span> (<span class="params">fn</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> ele = <span class="built_in">this</span>.ele;</span><br><span class="line">        <span class="comment">// 鼠标位置</span></span><br><span class="line">        <span class="keyword">var</span> mouse = <span class="built_in">this</span>.mouse;</span><br><span class="line">        <span class="keyword">var</span> _this = <span class="built_in">this</span>;</span><br><span class="line">        <span class="comment">// 鼠标按下</span></span><br><span class="line">        ele.onmousedown = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (_this.isTarget) &#123;</span><br><span class="line">                e = e || <span class="built_in">window</span>.event;</span><br><span class="line">                <span class="keyword">var</span> l = e.clientX;</span><br><span class="line">                <span class="keyword">var</span> t = e.clientY;</span><br><span class="line">                mouse.mouseEleClient.t = t - <span class="built_in">this</span>.offsetTop;</span><br><span class="line">                mouse.mouseEleClient.l = l - <span class="built_in">this</span>.offsetLeft;</span><br><span class="line">                mouse.mouseSuo = <span class="literal">true</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// 鼠标弹起</span></span><br><span class="line">        ele.onmouseup = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">            mouse.mouseSuo = <span class="literal">false</span>;</span><br><span class="line">            fn(<span class="built_in">this</span>.offsetTop, <span class="built_in">this</span>.offsetLeft);</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// 全局监听鼠标移动时间</span></span><br><span class="line">        <span class="built_in">window</span>.addEventListener(<span class="string">&quot;mousemove&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 鼠标按下时移动</span></span><br><span class="line">            <span class="keyword">if</span> (mouse.mouseSuo) &#123;</span><br><span class="line">                e = e || <span class="built_in">window</span>.event;</span><br><span class="line">                <span class="keyword">var</span> l = e.clientX;</span><br><span class="line">                <span class="keyword">var</span> t = e.clientY;</span><br><span class="line">                ele.style.top = t - mouse.mouseEleClient.t + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">                ele.style.left = l - mouse.mouseEleClient.l + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 移动到终点并固定</span></span><br><span class="line">    MoveEle.prototype.toTarget = <span class="function"><span class="keyword">function</span> (<span class="params">left, top</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.ele.style.top = ++top + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        <span class="built_in">this</span>.ele.style.left = ++left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        <span class="comment">// 锁住元素无法移动了</span></span><br><span class="line">        <span class="built_in">this</span>.isTarget = <span class="literal">false</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    MoveEle.prototype.toOrigin = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">//移动到原来位置</span></span><br><span class="line">        <span class="built_in">this</span>.ele.style.top = <span class="built_in">this</span>.offsetTop + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">        <span class="built_in">this</span>.ele.style.left = <span class="built_in">this</span>.offsetLeft + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="comment">// 目标元素对象</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">TargetEle</span>(<span class="params">ele</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.ele = ele;</span><br><span class="line">        <span class="built_in">this</span>.target = &#123;</span><br><span class="line">            <span class="comment">// 两个元素重叠2 / 3就算成功</span></span><br><span class="line">            coincidence: <span class="number">2</span> / <span class="number">3</span>,</span><br><span class="line">            <span class="comment">// 元素是否已经放上</span></span><br><span class="line">            isTarget: <span class="literal">false</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="built_in">this</span>.offsetTop = ele.offsetTop;</span><br><span class="line">        <span class="built_in">this</span>.offsetLeft = ele.offsetLeft;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 判断是否放上了元素</span></span><br><span class="line">    TargetEle.prototype.isTarget = <span class="function"><span class="keyword">function</span> (<span class="params">t, l, w, h</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.ele.offsetWidth;</span><br><span class="line">        <span class="keyword">var</span> xdt = <span class="built_in">Math</span>.abs(t - <span class="built_in">this</span>.offsetTop);</span><br><span class="line">        <span class="keyword">var</span> xdl = <span class="built_in">Math</span>.abs(l - <span class="built_in">this</span>.offsetLeft);</span><br><span class="line">        h = h || <span class="built_in">this</span>.ele.offsetHeight;</span><br><span class="line">        w = w || <span class="built_in">this</span>.ele.offsetWidth;</span><br><span class="line">        <span class="keyword">var</span> tarh = <span class="built_in">this</span>.ele.offsetHeight - xdt;</span><br><span class="line">        <span class="keyword">var</span> tarw = <span class="built_in">this</span>.ele.offsetWidth - xdl;</span><br><span class="line">        <span class="keyword">if</span> (</span><br><span class="line">            (tarh * tarw) / (h * w) &gt; <span class="built_in">this</span>.target.coincidence &amp;&amp;</span><br><span class="line">            tarh &gt; <span class="number">0</span> &amp;&amp;</span><br><span class="line">            tarw &gt; <span class="number">0</span></span><br><span class="line">        ) &#123;</span><br><span class="line">            <span class="built_in">this</span>.target.isTarget = <span class="literal">true</span>;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 分别进行三个移动元素和对应目标元素的判断</span></span><br><span class="line">    <span class="keyword">var</span> srcME_1 = <span class="keyword">new</span> MoveEle(src1);</span><br><span class="line">    <span class="keyword">var</span> desTE_1 = <span class="keyword">new</span> TargetEle(dest1);</span><br><span class="line">    srcME_1.init(<span class="function"><span class="keyword">function</span> (<span class="params">t, l</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (desTE_1.isTarget(t, l)) &#123;</span><br><span class="line">            srcME_1.toTarget(desTE_1.offsetLeft, desTE_1.offsetTop);</span><br><span class="line">            successNum++;</span><br><span class="line">            <span class="keyword">if</span> (successNum == <span class="number">3</span>) successFn();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            srcME_1.toOrigin();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">var</span> srcME_2 = <span class="keyword">new</span> MoveEle(src2);</span><br><span class="line">    <span class="keyword">var</span> desTE_2 = <span class="keyword">new</span> TargetEle(dest2);</span><br><span class="line">    srcME_2.init(<span class="function"><span class="keyword">function</span> (<span class="params">t, l</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (desTE_2.isTarget(t, l)) &#123;</span><br><span class="line">            srcME_2.toTarget(desTE_2.offsetLeft, desTE_2.offsetTop);</span><br><span class="line">            successNum++;</span><br><span class="line">            <span class="keyword">if</span> (successNum == <span class="number">3</span>) successFn();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            srcME_2.toOrigin();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">var</span> srcME_3 = <span class="keyword">new</span> MoveEle(src3);</span><br><span class="line">    <span class="keyword">var</span> desTE_3 = <span class="keyword">new</span> TargetEle(dest3);</span><br><span class="line">    srcME_3.init(<span class="function"><span class="keyword">function</span> (<span class="params">t, l</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (desTE_3.isTarget(t, l)) &#123;</span><br><span class="line">            srcME_3.toTarget(desTE_3.offsetLeft, desTE_3.offsetTop);</span><br><span class="line">            successNum++;</span><br><span class="line">            <span class="keyword">if</span> (successNum == <span class="number">3</span>) successFn();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            srcME_3.toOrigin();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 成功</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">successFn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        success.style.display = <span class="string">&quot;block&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>提交未通过，不过可以正常运行</p>
<h4 id="相关知识点-62"><a href="#相关知识点-62" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>ES5对象</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="66-双色球机选一注"><a href="#66-双色球机选一注" class="headerlink" title="66. 双色球机选一注"></a>66. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/4d712994d0364a159f8169b7b0e74d04">双色球机选一注</a></h3><h4 id="题目描述-60"><a href="#题目描述-60" class="headerlink" title="题目描述"></a>题目描述</h4><p>双色球由33个红球和16个蓝球组成，1注双色球包括6个不重复的红球和1个蓝球。<br>请阅读给出的页面和代码，完成 randomFn 函数，实现“随机一注”功能，要求如下：</p>
<p>函数返回：</p>
<p> 1.以字符串形式输出“随机一注”结果，选中的红蓝球用”|”隔开，红球在前，号码间用半角逗号隔开，如”06,10,13,18,23,27|05”</p>
<p> 2.红球和蓝球号码排列顺序 需与页面展示的顺序对应</p>
<p>页面交互：</p>
<p> 1.将选中的红球和蓝球（页面中对应DOM元素）用class=”active”高亮</p>
<p> 2.将选中的球按号码从小到大排列，移至所属组的前方，结果如示意图所示</p>
<p> 3.每次执行 randomFn 函数，输出符合要求且不完全重复</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210619220931.png" alt="img"></p>
<p>注意：</p>
<p>1、请使用原生JavaScript操作DOM元素，不要增加、删除DOM元素或修改css</p>
<p>2、请使用ES5语法</p>
<p>3、答题时不要使用第三方插件</p>
<p>4、运行浏览器为chrome浏览器</p>
<p>5、可能涉及的点</p>
<p>// element.className<br>// element.classList<br>// element.classList.add<br>// element.classList.remove<br>// element.getAttribute<br>// element.setAttribute<br>// element.innerHTML<br>// element.insertBefore<br>// element.parentNode</p>
<p>// document.querySelector<br>// document.querySelectorAll<br>// document.getElementsByTagName<br>// document.getElementsByClassName</p>
<p>// Array.sort<br>// Array.push<br>// Array.join<br>// Array.indexOf<br>// Array.forEach<br>// Array.map</p>
<p>// Math.random<br>// Math.floor</p>
<p>// Number.toString()</p>
<h4 id="代码-20"><a href="#代码-20" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;main&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;balls red&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>红球<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;balls-wp&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>01<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>02<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>03<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>04<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>05<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>06<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>07<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>08<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>09<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>10<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>11<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>12<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>13<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>14<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>15<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>16<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>17<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>18<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>19<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>20<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>21<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>22<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>23<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>24<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>25<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>26<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>27<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>28<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>29<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>30<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>31<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>32<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>33<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;balls blue&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>蓝球<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;balls-wp&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>01<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>02<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>03<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>04<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>05<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>06<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>07<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>08<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>09<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>10<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>11<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>12<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>13<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>14<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>15<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">b</span>&gt;</span>16<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.balls</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">450px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">30px</span> <span class="number">10px</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.balls</span>:after &#123;</span><br><span class="line">    content: <span class="string">&quot;\20&quot;</span>;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.balls</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.red</span> <span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f56c6c</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.blue</span> <span class="selector-class">.active</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#3a8ee6</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.red</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#feeff0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.red</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#f56c6c</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.blue</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#ecf8ff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.main</span> <span class="selector-class">.blue</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#3a8ee6</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line">randomFn();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">randomFn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 存储结果</span></span><br><span class="line">    <span class="keyword">var</span> res = <span class="string">&quot;&quot;</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 从[min, max]中随机选择len个数</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">randomArr</span>(<span class="params">min, max, len</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> numArr = [];</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 选len个不重复的球(随机数)</span></span><br><span class="line">        <span class="keyword">while</span> (numArr.length &lt; len) &#123;</span><br><span class="line">            <span class="keyword">var</span> colorNum = randomHelper(min, max);</span><br><span class="line">            <span class="comment">// 保证选择到的随机数不重复</span></span><br><span class="line">            <span class="keyword">if</span> (numArr.indexOf(colorNum) === -<span class="number">1</span>) &#123;</span><br><span class="line">                numArr.push(colorNum);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 从[min, max]中随机选择一个数</span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">randomHelper</span>(<span class="params">min, max</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> num = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min + <span class="number">1</span>) + min);</span><br><span class="line">            <span class="keyword">if</span> (num &lt;= <span class="number">9</span>) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="string">&quot;0&quot;</span> + num;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> num + <span class="string">&quot;&quot;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 数组升序排序,大元素显示时会在后边</span></span><br><span class="line">        numArr.sort(<span class="function">(<span class="params">a, b</span>) =&gt;</span> <span class="built_in">Number</span>(a) - <span class="built_in">Number</span>(b));</span><br><span class="line">        <span class="keyword">return</span> numArr;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 1.选取所有的随机数</span></span><br><span class="line">    <span class="comment">// 红球数组</span></span><br><span class="line">    <span class="keyword">var</span> redArr = randomArr(<span class="number">1</span>, <span class="number">33</span>, <span class="number">6</span>);</span><br><span class="line">    res += redArr.join(<span class="string">&quot;,&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 蓝球数组</span></span><br><span class="line">    <span class="keyword">var</span> blueArr = randomArr(<span class="number">1</span>, <span class="number">16</span>, <span class="number">1</span>);</span><br><span class="line">    res += <span class="string">&quot;|&quot;</span> + blueArr[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.找到所有红球和蓝球的对应元素</span></span><br><span class="line">    <span class="keyword">var</span> red = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;.red b&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> blue = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;.blue b&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.将对应的两个组件参数设置为想要的参数</span></span><br><span class="line">    mutual(red, redArr, <span class="string">&quot;red&quot;</span>);</span><br><span class="line">    mutual(blue, blueArr, <span class="string">&quot;blue&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 函数</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">mutual</span>(<span class="params">colorB, arr, color</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; colorB.length; i++) &#123;</span><br><span class="line">            <span class="comment">// 属于随机数组</span></span><br><span class="line">            <span class="keyword">if</span> (arr.indexOf(colorB[i].innerHTML) !== -<span class="number">1</span>) &#123;</span><br><span class="line">                colorB[i].remove();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 找到所选颜色对应的列表</span></span><br><span class="line">        <span class="keyword">var</span> colorTemp = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.&quot;</span> + color + <span class="string">&quot; .balls-wp&quot;</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 重新创建激活的元素</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = arr.length - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">            <span class="keyword">var</span> addColor = <span class="built_in">document</span>.createElement(<span class="string">&quot;b&quot;</span>);</span><br><span class="line">            addColor.classList.add(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">            addColor.innerHTML = arr[i];</span><br><span class="line">            <span class="comment">//第一个参数是要添加的元素，第二个参数是要插入该元素前面的元素</span></span><br><span class="line">            colorTemp.insertBefore(addColor, colorTemp.childNodes[<span class="number">0</span>]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-63"><a href="#相关知识点-63" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>随机数操作</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="67-智能提示"><a href="#67-智能提示" class="headerlink" title="67. 智能提示"></a>67. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/efccf73b4ceb4446b6d71127f874e6d3">智能提示</a></h3><h4 id="题目描述-61"><a href="#题目描述-61" class="headerlink" title="题目描述"></a>题目描述</h4><p>本题展示了一个简化版的搜索框智能提示功能，请按照如下要求完成suggest函数。<br>1、当输入框的值发生变化时，系统会调用suggest函数，用于显示/隐藏智能提示数据，参数items为一个字符串数组。<br>2、当items中的字符串和输入框的值匹配时，将匹配的数据依次渲染在ul下的li节点中，并显示.js-suggest节点，否则移除ul下的所有li节点，并隐藏.js-suggest节点<br>3、输入框的值需要移除两侧空白再进行匹配<br>4、输入框的值为空时，按照全部不匹配处理<br>5、字符串使用模糊匹配，比如”北大”能匹配”北大”和”北京大学”，但不能匹配”大北京”，即按照 /北.<em>?大.</em>?/ 这个正则进行匹配<br>6、通过在.js-suggest节点上添加/移除 hide 这个class来控制该节点的隐藏/显示<br>7、当前界面是执行 suggest([‘不匹配数据’, ‘根据输入框的值’, ‘从给定字符串数组中筛选出匹配的数据，依次显示在li节点中’, ‘如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点’]) 后的结果<br>8、请不要手动修改html和css<br>9、不要使用第三方插件<br>10、请使用ES5语法</p>
<h4 id="代码-21"><a href="#代码-21" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;search&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">class</span>=<span class="string">&quot;js-input&quot;</span> <span class="attr">value</span>=<span class="string">&quot;的&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;js-suggest&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>根据输入框的值<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.search</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-input</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">450px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#cccccc</span>;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-suggest</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">466px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#cccccc</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">39px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-suggest</span><span class="selector-class">.hide</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-suggest</span> <span class="selector-tag">ul</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-suggest</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">14px</span> arial;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">cursor</span>: default;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-suggest</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">suggest</span>(<span class="params">items</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1.获取input的值，要去除开头和结尾的空格</span></span><br><span class="line">    <span class="keyword">var</span> divStr = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div input&#x27;</span>).value;</span><br><span class="line">    divStr = divStr.trim();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2.先清空已有的li</span></span><br><span class="line">    <span class="keyword">var</span> jsS = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.js-suggest&#x27;</span>)</span><br><span class="line">    <span class="keyword">var</span> oldli = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;.js-suggest ul li&#x27;</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; oldli.length; i++) &#123;</span><br><span class="line">        oldli[i].remove();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3.根据input的值动态生成正则</span></span><br><span class="line">    <span class="comment">// .表示任意字符, *表示0个或多个，相当于&#123;0, &#125;,?表示0个或1个，相当于&#123;0,1&#125;</span></span><br><span class="line">    <span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(divStr.replace(<span class="regexp">/([\\\/\(\)\+\*\?\:\\[\]\^\$])/g</span>, <span class="string">&quot;\\$1&quot;</span>).replace(<span class="regexp">/(\\.)/g</span>, <span class="string">&quot;$1.*?&quot;</span>));</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 4.如果字符串为空，隐藏js-suggest</span></span><br><span class="line">    <span class="keyword">if</span> (!divStr) &#123;</span><br><span class="line">        jsS.classList.add(<span class="string">&#x27;hide&#x27;</span>);</span><br><span class="line">        <span class="comment">// 返回不再执行</span></span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 5.检索数组中有没有匹配的，然后插入新节点</span></span><br><span class="line">    <span class="comment">// 用来标识是否有匹配的，决定隐藏不隐藏</span></span><br><span class="line">    <span class="keyword">var</span> ifHide = <span class="literal">true</span>; </span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; items.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (reg.test(items[i])) &#123;</span><br><span class="line">            ifHide = <span class="literal">false</span>;</span><br><span class="line">            <span class="keyword">var</span> newLi = <span class="built_in">document</span>.createElement(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">            newLi.innerHTML = items[i]</span><br><span class="line">            <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>).appendChild(newLi);</span><br><span class="line">            jsS.classList.remove(<span class="string">&#x27;hide&#x27;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 6.不匹配</span></span><br><span class="line">    <span class="keyword">if</span> (ifHide) &#123;</span><br><span class="line">        jsS.classList.add(<span class="string">&#x27;hide&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-64"><a href="#相关知识点-64" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>正则表达式</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="68-文字输出"><a href="#68-文字输出" class="headerlink" title="68. 文字输出"></a>68. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/b403d1051e5d4568912e6d265e1e2cde">文字输出</a></h3><h4 id="题目描述-62"><a href="#题目描述-62" class="headerlink" title="题目描述"></a>题目描述</h4><p>页面上存在id为jsBlink的下划线闪动节点，请按照如下需求实现 output 函数<br>1、函数 output 接收一个字符串参数，每隔200毫秒在闪动节点之前逐个显示字符<br>2、请新建span节点放置每个字符，其中span必须存在class “word”，并随机加上 color0 ~ color23 中的任一个class（请使用系统随机函数）<br>3、每次输出指定字符串前，请将闪动节点之前的所有其他节点移除<br>4、不要销毁或者重新创建闪动节点<br>5、如果输出字符为空格、&lt;、&gt;，请分别对其进行HTML转义，如果是\n请直接输出&lt;br /&gt;，其他字符不需要做处理<br>6、请不要手动调用output函数<br>7、当前界面为系统执行 output(‘hello world\n你好世界’) 之后，最终的界面，过程请参考以下图片</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620111039.gif" alt="img"></p>
<p>8、请不要手动修改html和css<br>9、不要使用第三方插件<br>10、请使用ES5语法</p>
<h4 id="代码-22"><a href="#代码-22" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color23&quot;</span>&gt;</span>h<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color22&quot;</span>&gt;</span>e<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color4&quot;</span>&gt;</span>l<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color24&quot;</span>&gt;</span>l<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color17&quot;</span>&gt;</span>o<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color2&quot;</span>&gt;</span><span class="symbol">&amp;nbsp;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color9&quot;</span>&gt;</span>w<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color3&quot;</span>&gt;</span>o<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color1&quot;</span>&gt;</span>r<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color23&quot;</span>&gt;</span>l<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color15&quot;</span>&gt;</span>d<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color15&quot;</span>&gt;</span>你<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color13&quot;</span>&gt;</span>好<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color16&quot;</span>&gt;</span>世<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;word color19&quot;</span>&gt;</span>界<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;blink&quot;</span> <span class="attr">id</span>=<span class="string">&quot;jsBlink&quot;</span>&gt;</span>|<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>,</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color1</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#e60012</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color2</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#eb6100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color3</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f39800</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color4</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fcc800</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color5</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff100</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color6</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#cfdb00</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color7</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8fc31f</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color8</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#22ac38</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color9</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#009944</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color10</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#009b6b</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color11</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#009e96</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color12</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00a0c1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color13</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00a0e9</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color14</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#0086d1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color15</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#0068b7</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color16</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#00479d</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color17</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#1d2088</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color18</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#601986</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color19</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#920783</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color20</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#be0081</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color21</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#e4007f</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color22</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#e5006a</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color23</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#e5004f</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color24</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#e60033</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.word</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.content</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blink</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">animation</span>: fade <span class="number">500ms</span> infinite;</span><br><span class="line">    -webkit-<span class="attribute">animation</span>: fade <span class="number">500ms</span> infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> fade &#123;</span><br><span class="line">    <span class="selector-tag">from</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="number">50%</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">to</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">output</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1.删除原有结点</span></span><br><span class="line">    <span class="keyword">var</span> contents = <span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;content&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> jsBlink = <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsBlink&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> childs = contents[<span class="number">0</span>].childNodes;</span><br><span class="line">    <span class="keyword">while</span> (childs.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (childs[<span class="number">0</span>] == jsBlink) &#123;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        contents[<span class="number">0</span>].removeChild(childs[<span class="number">0</span>]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 2.每隔200毫秒输出字符</span></span><br><span class="line">    <span class="keyword">var</span> fun = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (i == str.length) <span class="built_in">clearInterval</span>(fun);</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">var</span> c = str[i];</span><br><span class="line">            <span class="keyword">if</span> (c == <span class="string">&quot;\n&quot;</span>) &#123;</span><br><span class="line">                <span class="comment">// \n标签直接创建一个&lt;br/&gt;</span></span><br><span class="line">                <span class="keyword">var</span> br = <span class="built_in">document</span>.createElement(<span class="string">&quot;br&quot;</span>);</span><br><span class="line">                <span class="comment">// 在闪烁标签前面接一个标签</span></span><br><span class="line">                contents[<span class="number">0</span>].insertBefore(br, jsBlink);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="comment">// 创造一个span标签</span></span><br><span class="line">                <span class="keyword">var</span> newSpan = <span class="built_in">document</span>.createElement(<span class="string">&quot;span&quot;</span>);</span><br><span class="line">                <span class="comment">// 随机曾加一个颜色</span></span><br><span class="line">                newSpan.className = <span class="string">&quot;word color&quot;</span> + (<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">24</span>) + <span class="number">1</span>);</span><br><span class="line">                <span class="comment">// 转义字符</span></span><br><span class="line">                <span class="keyword">if</span> (c == <span class="string">&quot;&lt;&quot;</span>) &#123;</span><br><span class="line">                    c = <span class="string">&quot;&amp;lt&quot;</span>;</span><br><span class="line">                &#125; <span class="keyword">else</span> <span class="keyword">if</span> (c == <span class="string">&quot;&gt;&quot;</span>) &#123;</span><br><span class="line">                    c = <span class="string">&quot;&amp;gt&quot;</span>;</span><br><span class="line">                &#125; <span class="keyword">else</span> <span class="keyword">if</span> (c == <span class="string">&quot; &quot;</span>) &#123;</span><br><span class="line">                    c = <span class="string">&quot;&amp;nbsp&quot;</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                newSpan.innerHTML = c;</span><br><span class="line">                contents[<span class="number">0</span>].insertBefore(newSpan, jsBlink);</span><br><span class="line">            &#125;</span><br><span class="line">            i++;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, <span class="number">200</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-65"><a href="#相关知识点-65" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>转义字符</li>
<li>定时器</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="69-包围"><a href="#69-包围" class="headerlink" title="69. 包围"></a>69. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/fcf91b13e4204fb897ea408986ea1b57">包围</a></h3><h4 id="题目描述-63"><a href="#题目描述-63" class="headerlink" title="题目描述"></a>题目描述</h4><p>系统会随机生成id为jsLayout的 m x n 表格(m &gt;= 3, n &gt;= 3)，请按照如下需求实现bind函数</p>
<p>1、bind 函数为每个td节点绑定click事件，当某个td节点被点击时class变为current，同时以该td为中心的九宫格td节点class变为wrap，具体效果参考以下图片<br>2、每次click后，请清空所有不需要变动的td节点的class<br>3、请不要手动调用bind函数<br>4、当前界面为系统生成 10 * 10 表格，执行 bind 函数，并点击第一个td后的效果<br>5、请不要手动修改html和css<br>6、不要使用第三方插件<br>7、请使用ES5语法<br><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620115859.gif" alt="img"></p>
<h4 id="代码-23"><a href="#代码-23" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">&quot;jsLayout&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;wrap&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;wrap&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;wrap&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span> &#123;</span><br><span class="line">    <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">    <span class="attribute">table-layout</span>: fixed;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">td</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#E1E1E1</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.current</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#1D2088</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.wrap</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#00A0E9</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 挂载函数</span></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    bind();</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bind</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 每行的列数</span></span><br><span class="line">    <span class="keyword">const</span> n = <span class="number">10</span>;</span><br><span class="line">    <span class="comment">// 得到所有的格子标签</span></span><br><span class="line">    <span class="keyword">var</span> tdArr = <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsLayout&quot;</span>).getElementsByTagName(<span class="string">&quot;td&quot;</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; tdArr.length; i++) &#123;</span><br><span class="line">        <span class="comment">// 无ES6需要使用闭包绑定参数</span></span><br><span class="line">        (<span class="function"><span class="keyword">function</span> (<span class="params">index</span>) </span>&#123;</span><br><span class="line">            tdArr[index].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                <span class="comment">// 行数和列数</span></span><br><span class="line">                <span class="keyword">var</span> row = <span class="built_in">parseInt</span>(index / n);</span><br><span class="line">                <span class="keyword">var</span> col = index % n;</span><br><span class="line">                <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; tdArr.length; j++) &#123;</span><br><span class="line">                    tdArr[j].className = <span class="string">&quot;&quot;</span>;</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">                <span class="comment">// 找到可能的上/下一行/列</span></span><br><span class="line">                <span class="keyword">var</span> prevRow = row - <span class="number">1</span> &gt;= <span class="number">0</span> ? row - <span class="number">1</span> : row;</span><br><span class="line">                <span class="keyword">var</span> nextRow = row + <span class="number">1</span> &lt;= n - <span class="number">1</span> ? row + <span class="number">1</span> : row;</span><br><span class="line">                <span class="keyword">var</span> prevCol = col - <span class="number">1</span> &gt;= <span class="number">0</span> ? col - <span class="number">1</span> : col;</span><br><span class="line">                <span class="keyword">var</span> nextCol = col + <span class="number">1</span> &lt;= n - <span class="number">1</span> ? col + <span class="number">1</span> : col;</span><br><span class="line"></span><br><span class="line">                <span class="comment">// 周围一圈设置样式</span></span><br><span class="line">                tdArr[prevRow * n + prevCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line">                tdArr[prevRow * n + col].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line">                tdArr[prevRow * n + nextCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line"></span><br><span class="line">                tdArr[row * n + prevCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line">                tdArr[row * n + nextCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line"></span><br><span class="line">                tdArr[nextRow * n + prevCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line">                tdArr[nextRow * n + col].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line">                tdArr[nextRow * n + nextCol].className = <span class="string">&quot;wrap&quot;</span>;</span><br><span class="line"></span><br><span class="line">                <span class="comment">// 被选中的单元设置样式,放在最后防止前面的覆盖</span></span><br><span class="line">                tdArr[row * n + col].className = <span class="string">&quot;current&quot;</span>;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;)(i);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>提交未通过，不过可以正常运行</p>
<h4 id="相关知识点-66"><a href="#相关知识点-66" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>一维数组二维数组转换</li>
<li>边界值处理</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="70-分页"><a href="#70-分页" class="headerlink" title="70. 分页"></a>70. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/71da71df9d1c4af9b8dc056213473ba7">分页</a></h3><h4 id="题目描述-64"><a href="#题目描述-64" class="headerlink" title="题目描述"></a>题目描述</h4><p>本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。<br>1、最多连续显示5页，居中高亮显示current页（如demo1所示)<br>2、total &lt;= 1 时，隐藏该组件（如demo2所示）<br>3、如果total&lt;=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）<br>4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)<br>5、total、current均为正整数，1 &lt;= current &lt;= total<br>6、当前界面中，节点A为系统执行 new Pagination(节点A，20, 10) 后的展示效果<br>7、请不要手动修改html和css<br>8、不要使用第三方插件</p>
<h4 id="代码-24"><a href="#代码-24" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsContainer&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>8<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>9<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>10<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>11<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>12<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>末页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>(Demo1) total: 10，current: 4<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>末页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>(Demo2) total: 0，current: 0<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination hide&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>(Demo3) total: 3，current: 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>(Demo4) total: 10，current: 2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>末页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;demo&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>(Demo5) total: 10，current: 9<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;pagination&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>7<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>8<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>9<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>10<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.demo</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ebedf0</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.demo</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pagination</span> &#123;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span><span class="selector-class">.hide</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">32px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d9d9d9</span>;</span><br><span class="line">    <span class="attribute">border-top-width</span>: <span class="number">1.02px</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    <span class="attribute">transition</span>: color <span class="number">0.3s</span>, border-color <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#d9d9d9</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">0</span> <span class="number">4px</span> <span class="number">4px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span><span class="selector-class">.current</span> &#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="number">#1890ff</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#1890ff</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#1890ff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.pagination</span> <span class="selector-tag">li</span><span class="selector-class">.current</span><span class="selector-pseudo">:not</span>(<span class="selector-pseudo">:first</span>-child) &#123;</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">1px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Pagination</span>(<span class="params">container, total, current</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.total = total;</span><br><span class="line">    <span class="built_in">this</span>.current = current;</span><br><span class="line">    <span class="built_in">this</span>.html = html;</span><br><span class="line">    <span class="built_in">this</span>.val = val;</span><br><span class="line">    <span class="comment">// 创建分页组件根节点</span></span><br><span class="line">    <span class="built_in">this</span>.el = <span class="built_in">document</span>.createElement(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span> (!<span class="built_in">this</span>.el) <span class="keyword">return</span>;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.html();</span><br><span class="line">    container.appendChild(<span class="built_in">this</span>.el);</span><br><span class="line">    <span class="comment">// 判断是否需要隐藏当前元素</span></span><br><span class="line">    <span class="built_in">this</span>.el.className = total &gt; <span class="number">1</span> ? <span class="string">&quot;pagination&quot;</span> : <span class="string">&quot;pagination hide&quot;</span>;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">html</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.total &lt;= <span class="number">1</span>) <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 生成组件的内部html字符串</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.current &gt; <span class="built_in">this</span>.total) <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.total &lt;= <span class="number">5</span>)</span><br><span class="line">            <span class="keyword">return</span> getPaginationHTML(<span class="number">1</span>, <span class="built_in">this</span>.total, <span class="built_in">this</span>.current, <span class="built_in">this</span>.total);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.current &lt; <span class="number">3</span>)</span><br><span class="line">            <span class="keyword">return</span> getPaginationHTML(<span class="number">1</span>, <span class="number">5</span>, <span class="built_in">this</span>.current, <span class="built_in">this</span>.total);</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.current + <span class="number">2</span> &gt; <span class="built_in">this</span>.total)</span><br><span class="line">            <span class="keyword">return</span> getPaginationHTML(</span><br><span class="line">                <span class="built_in">this</span>.total - <span class="number">4</span>,</span><br><span class="line">                <span class="built_in">this</span>.total,</span><br><span class="line">                <span class="built_in">this</span>.current,</span><br><span class="line">                <span class="built_in">this</span>.total</span><br><span class="line">            );</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> getPaginationHTML(</span><br><span class="line">            <span class="built_in">this</span>.current - <span class="number">2</span>,</span><br><span class="line">            <span class="built_in">this</span>.current + <span class="number">2</span>,</span><br><span class="line">            <span class="built_in">this</span>.current,</span><br><span class="line">            <span class="built_in">this</span>.total</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 实现导航内容页面的渲染</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getPaginationHTML</span>(<span class="params">start, end, current, total</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> str = <span class="string">&quot;&quot;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 显示首页</span></span><br><span class="line">        <span class="keyword">if</span> (start &gt; <span class="number">1</span>) &#123;</span><br><span class="line">            str += <span class="string">&quot;&lt;li&gt;首页&lt;/li&gt;&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = start; i &lt;= end; i++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (i === current) &#123;</span><br><span class="line">                <span class="comment">// 当前页面增加一个current渲染</span></span><br><span class="line">                str += <span class="string">&#x27;&lt;li class=&quot;current&quot;&gt;&#x27;</span> + i + <span class="string">&quot;&lt;/li&gt;&quot;</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                str += <span class="string">&quot;&lt;li&gt;&quot;</span> + i + <span class="string">&quot;&lt;/li&gt;&quot;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 显示末页</span></span><br><span class="line">        <span class="keyword">if</span> (total &gt; <span class="number">5</span> &amp;&amp; current + <span class="number">2</span> &lt;= total) &#123;</span><br><span class="line">            str += <span class="string">&quot;&lt;li&gt;末页&lt;/li&gt;&quot;</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> str;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">val</span>(<span class="params">current</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">arguments</span>.length === <span class="number">0</span>) <span class="keyword">return</span> <span class="built_in">this</span>.current;</span><br><span class="line">        <span class="keyword">if</span> (current &lt; <span class="number">1</span> || current &gt; <span class="built_in">this</span>.total || current === <span class="built_in">this</span>.current) <span class="keyword">return</span>;</span><br><span class="line">        <span class="built_in">this</span>.current = current;</span><br><span class="line">        <span class="built_in">this</span>.el.innerHTML = <span class="built_in">this</span>.html();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-67"><a href="#相关知识点-67" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>动态渲染</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="71-移动控制"><a href="#71-移动控制" class="headerlink" title="71. 移动控制"></a>71. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/84af7932f53f4bbeaa1fa079a138bb35">移动控制</a></h3><h4 id="题目描述-65"><a href="#题目描述-65" class="headerlink" title="题目描述"></a>题目描述</h4><p>界面中存在id=jsContainer的节点A，系统会随机生成id为jsLayout的 m行 x n列 表格(m &gt;= 1, n &gt;= 1)，并随机选中一个td节点，请按照如下需求实现bind函数<br>1、bind 函数为document绑定keydown事件，当系统触发上(键值38)下(键值40)左(键值37)右(键值39)按键时，请找到当前选中的td节点，并根据当前指令切换高亮节点，具体效果参考以下图片<br>2、在第一列往左移动则到达最后一列；在最后一列往右移动则到达第一列；在第一行往上移动则到达最后一行；在最后一行往下移动则到达第一行；<br>3、请不要手动调用bind函数<br>4、当前界面为系统在节点A中生成 9 * 9 表格并随机选中一个td节点后的效果<br>5、请不要手动修改html和css，请不要修改js中的事件绑定方式<br>6、不要使用第三方插件</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620154721.gif" alt="img"></p>
<h4 id="代码-25"><a href="#代码-25" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsContainer&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">&quot;game&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">table</span><span class="selector-class">.game</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">table-layout</span>: fixed;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span><span class="selector-class">.game</span> <span class="selector-tag">td</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e1e1e1</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span><span class="selector-class">.game</span> <span class="selector-tag">td</span><span class="selector-class">.current</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#1890ff</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bind</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 找到选择的表单</span></span><br><span class="line">    <span class="keyword">const</span> game = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;tbody&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">    <span class="keyword">let</span> rowIdx = <span class="literal">null</span>,</span><br><span class="line">        colIdx = <span class="literal">null</span>;</span><br><span class="line">    <span class="keyword">const</span> m = game.children.length,</span><br><span class="line">          n = game.children[<span class="number">0</span>].children.length;</span><br><span class="line">    <span class="built_in">document</span>.onkeydown = <span class="function">(<span class="params">event</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (!event) <span class="keyword">return</span>;</span><br><span class="line">        <span class="keyword">var</span> code = event.keyCode || <span class="string">&quot;&quot;</span>;</span><br><span class="line">        <span class="keyword">if</span> (!&#123; <span class="number">37</span>: <span class="number">1</span>, <span class="number">38</span>: <span class="number">1</span>, <span class="number">39</span>: <span class="number">1</span>, <span class="number">40</span>: <span class="number">1</span> &#125;[code]) <span class="keyword">return</span>;</span><br><span class="line">        event.preventDefault &amp;&amp; event.preventDefault();</span><br><span class="line">        <span class="comment">// 请实现按键控制</span></span><br><span class="line">        <span class="keyword">const</span> current = game.getElementsByClassName(<span class="string">&quot;current&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">        <span class="comment">// 遍历每个格子</span></span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; m; i++) &#123;</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j &lt; n; j++) &#123;</span><br><span class="line">                <span class="keyword">let</span> item = game.children[i].children[j];</span><br><span class="line">                <span class="keyword">if</span> (item.className === <span class="string">&quot;current&quot;</span>) &#123;</span><br><span class="line">                    rowIdx = i;</span><br><span class="line">                    colIdx = j;</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">if</span> (rowIdx || rowIdx === <span class="number">0</span>) <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 当前元素置为一般格子</span></span><br><span class="line">        current.className = <span class="string">&quot;&quot;</span>;</span><br><span class="line">        <span class="keyword">if</span> (code === <span class="number">38</span>) &#123;</span><br><span class="line">            <span class="comment">// 上</span></span><br><span class="line">            colIdx === <span class="number">0</span> ? (colIdx = m - <span class="number">1</span>) : colIdx--;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code === <span class="number">40</span>) &#123;</span><br><span class="line">            <span class="comment">// 下</span></span><br><span class="line">            colIdx === m - <span class="number">1</span> ? (colIdx = <span class="number">0</span>) : colIdx++;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code === <span class="number">37</span>) &#123;</span><br><span class="line">            <span class="comment">// 左</span></span><br><span class="line">            rowIdx === <span class="number">0</span> ? (rowIdx = n - <span class="number">1</span>) : rowIdx--;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (code === <span class="number">39</span>) &#123;</span><br><span class="line">            <span class="comment">// 右</span></span><br><span class="line">            rowIdx === n - <span class="number">1</span> ? (rowIdx = <span class="number">0</span>) : rowIdx++;</span><br><span class="line">        &#125;</span><br><span class="line">        game.children[colIdx].children[rowIdx].className = <span class="string">&quot;current&quot;</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-68"><a href="#相关知识点-68" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>键盘事件</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="72-dom节点转成json数据"><a href="#72-dom节点转成json数据" class="headerlink" title="72. dom节点转成json数据"></a>72. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/0340a0c6d11d4aadba0aef86e6ae723f">dom节点转成json数据</a></h3><h4 id="题目描述-66"><a href="#题目描述-66" class="headerlink" title="题目描述"></a>题目描述</h4><p>页面上存在id=jsContainer的节点A，系统会随机在节点A中生成文档片段，请按照如下需求实现 dom2json 函数<br>1、dom2json需要分析整个节点A的dom结构，并将其结构转换为对应的json对象<br>2、需要获取dom结构的标签名称(tag)，所有属性(attributes)，子节点(children)<br>3、文档片段中的属性形式均为 name=”value”，解析之后的格式为{name: value}, 属性值为String类型，不需要做解析<br>4、随机生成的文档片段中，只包含 nodeType 为1(element)和3(text)的节点，不需要考虑其他节点类型<br>5、纯文本也视为一个节点, json格式为 {tag: ‘text’, content: ‘文本内容’}，content为文本内容执行trim后的结果，如果该结果为空，则忽略当前节点<br>6、返回结果中的标签名称不区分大小写<br>7、如果节点不包含属性值或者子节点，其对应的结果中需要保留attributes以及children字段，例如 {tag: ‘div’, attributes: {}, children: []}<br>8、当前界面执行dom2json之后的结果为如下图所示<br>9、请不要手动修改html和css<br>10、不要使用第三方插件</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620172929.png" alt="img"></p>
<h4 id="代码-26"><a href="#代码-26" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsContainer&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;js-test&quot;</span> <span class="attr">id</span>=<span class="string">&quot;jsParent&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-index</span>=<span class="string">&quot;0&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-index</span>=<span class="string">&quot;1&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;font-weight: bold;&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    4</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dom2json</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 找到容器</span></span><br><span class="line">    <span class="keyword">const</span> jsContainer = <span class="built_in">document</span>.getElementById(<span class="string">&quot;jsContainer&quot;</span>);</span><br><span class="line">    <span class="comment">// 将节点转化为json</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">handleDom</span>(<span class="params">node</span>) </span>&#123;</span><br><span class="line">        <span class="comment">// 虚拟节点</span></span><br><span class="line">        <span class="keyword">let</span> vnode = &#123;</span><br><span class="line">            tag: node.tagName.toLowerCase(),</span><br><span class="line">            attributes: &#123;&#125;,</span><br><span class="line">            children: [],</span><br><span class="line">        &#125;;</span><br><span class="line">        <span class="comment">// 属性和子节点</span></span><br><span class="line">        <span class="keyword">let</span> attributes = node.attributes,</span><br><span class="line">            childNodes = node.childNodes;</span><br><span class="line">        <span class="comment">// 遍历节点属性</span></span><br><span class="line">        <span class="keyword">if</span> (attributes.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; attributes.length; i++) &#123;</span><br><span class="line">                <span class="keyword">let</span> item = attributes[i];</span><br><span class="line">                vnode.attributes[item.nodeName] = item.nodeValue;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// 遍历子节点</span></span><br><span class="line">        <span class="keyword">if</span> (childNodes.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; childNodes.length; i++) &#123;</span><br><span class="line">                <span class="keyword">let</span> item = childNodes[i];</span><br><span class="line">                <span class="keyword">if</span> (item.nodeType === Node.TEXT_NODE) &#123;</span><br><span class="line">                    <span class="comment">// 属性节点</span></span><br><span class="line">                    <span class="keyword">if</span> (item.textContent.trim()) &#123;</span><br><span class="line">                        <span class="keyword">let</span> kids = &#123;</span><br><span class="line">                            tag: <span class="string">&quot;text&quot;</span>,</span><br><span class="line">                            content: item.textContent,</span><br><span class="line">                        &#125;;</span><br><span class="line">                        vnode.children.push(kids);</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125; <span class="keyword">else</span> <span class="keyword">if</span> (item.nodeType === Node.ELEMENT_NODE) &#123;</span><br><span class="line">                    <span class="comment">// 元素节点,递归处理</span></span><br><span class="line">                    vnode.children.push(handleDom(item));</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> vnode;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> handleDom(jsContainer);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-69"><a href="#相关知识点-69" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>递归处理</li>
<li>虚拟DOM</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="73-设置标签"><a href="#73-设置标签" class="headerlink" title="73. 设置标签"></a>73. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/b164e87713804e1ab46cf7a84936b6ba">设置标签</a></h3><h4 id="题目描述-67"><a href="#题目描述-67" class="headerlink" title="题目描述"></a>题目描述</h4><p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620191704.gif" alt="img"></p>
<p>本题展示了一个简化版的标签输入框，功能如下：<br>1、当用户输入内容并敲回车键时，将输入框的内容在输入框前显示成标签，并清空输入框内容<br>2、当用户敲删除键时，如果输入框当前没有内容，则删除前一个标签<br>3、标签需要去掉字符串两端的多余的空格<br>4、标签不能为空字符串<br>5、标签不能重复，如果输入已存在的内容相同的标签，则不添加，并清空输入框<br>6、请补充完成tagInput.init、tagInput.bindEvent、tagInput.addTag、tagInput.removeTag函数，实现上面的需求<br>7、相关键码值，回车键=13，删除键=8<br>8、请不要手动修改html和css<br>9、不要使用第三方插件<br>10、请使用ES5语法</p>
<h4 id="代码-27"><a href="#代码-27" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tag-input&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;tag&quot;</span>&gt;</span>前端<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;tag&quot;</span>&gt;</span>编程题<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;tag&quot;</span>&gt;</span>示例<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;tag&quot;</span>&gt;</span>标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">class</span>=<span class="string">&quot;js-input&quot;</span> <span class="attr">maxlength</span>=<span class="string">&quot;6&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入标签&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.tag-input</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#cccccc</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-flow</span>: row wrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.js-input</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">450px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">22px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">outline</span>: none;</span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">6.5em</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tag</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">5px</span> <span class="number">5px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#25bb9b</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tagInput = &#123;</span><br><span class="line">    isInited: <span class="literal">false</span>,</span><br><span class="line">    init: init,</span><br><span class="line">    bindEvent: bindEvent,</span><br><span class="line">    addTag: addTag,</span><br><span class="line">    removeTag: removeTag,</span><br><span class="line">&#125;;</span><br><span class="line">tagInput.init();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">if</span> (that.isInited) <span class="keyword">return</span>;</span><br><span class="line">    that.isInited = <span class="literal">true</span>;</span><br><span class="line">    <span class="comment">// 保存class为js-input的输入框的dom元素引用</span></span><br><span class="line">    that.input = <span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;js-input&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">    that.bindEvent();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bindEvent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> input = that.input;</span><br><span class="line">    <span class="keyword">if</span> (!input) <span class="keyword">return</span>;</span><br><span class="line">    input.addEventListener(<span class="string">&quot;keydown&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="comment">// 判断用户是否按了回车键</span></span><br><span class="line">        <span class="keyword">var</span> isEnter = <span class="literal">false</span>;</span><br><span class="line">        <span class="keyword">if</span> (event.keyCode === <span class="number">13</span>) isEnter = <span class="literal">true</span>;</span><br><span class="line">        <span class="comment">// 判断用户是否按了删除键</span></span><br><span class="line">        <span class="keyword">var</span> isDelete = <span class="literal">false</span>;</span><br><span class="line">        <span class="comment">// 【需求】2、当用户敲删除键时，如果输入框当前没有内容，则删除前一个标签</span></span><br><span class="line">        <span class="comment">// 如果按下了删除按钮，并且input框中的内容为空才执行删除tag操作。如果input内容为空则执行默认操作</span></span><br><span class="line">        <span class="keyword">if</span> (event.keyCode === <span class="number">8</span> || !that.input.value) isDelete = <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line">        (isEnter || isDelete) &amp;&amp; event.preventDefault();</span><br><span class="line">        isEnter &amp;&amp; that.addTag();</span><br><span class="line">        isDelete &amp;&amp; that.removeTag();</span><br><span class="line">    &#125;);</span><br><span class="line">    input.parentNode.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        input.focus();</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 【需求】1、当用户输入内容并敲回车键时，将输入框的内容在输入框前显示成标签，并清空输入框内容</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addTag</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="comment">// 【需求】4、标签不能为空字符串</span></span><br><span class="line">    <span class="keyword">if</span> (that.input.value === <span class="string">&quot;&quot;</span>) <span class="keyword">return</span>;</span><br><span class="line">    <span class="comment">// 创建需要添加的新标签</span></span><br><span class="line">    <span class="keyword">var</span> newSpan = <span class="built_in">document</span>.createElement(<span class="string">&quot;span&quot;</span>);</span><br><span class="line">    newSpan.className = <span class="string">&quot;tag&quot;</span>;</span><br><span class="line">    <span class="comment">// 【需求】3、标签需要去掉字符串两端的多余的空格&quot;</span></span><br><span class="line">    newSpan.innerHTML = that.input.value.trim();</span><br><span class="line">    <span class="comment">// 获取到已添加的tag标签，用于判断是否重复添加</span></span><br><span class="line">    <span class="keyword">var</span> tagList = that.input.parentElement.innerText.split(<span class="string">&quot;\n&quot;</span>);</span><br><span class="line">    <span class="comment">// 【需求】5、标签不能重复，如果输入已存在的内容相同的标签，则不添加，并清空输入框</span></span><br><span class="line">    <span class="keyword">if</span> (!tagList.includes(that.input.value)) &#123;</span><br><span class="line">        <span class="comment">// 向input框之前插入一个tag</span></span><br><span class="line">        that.input.parentElement.insertBefore(newSpan, that.input);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 添加完成后清空数据</span></span><br><span class="line">    that.input.value = <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeTag</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="comment">// 删除最后一个标签</span></span><br><span class="line">    that.input.parentElement.removeChild(that.input.previousElementSibling);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>提交未通过，不过可以正常运行</p>
<h4 id="相关知识点-70"><a href="#相关知识点-70" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>监听键盘事件</li>
<li>重复元素判定</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="74-选择组件"><a href="#74-选择组件" class="headerlink" title="74. 选择组件"></a>74. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/ed0bd346dc9c4184aacda183484a3a6f">选择组件</a></h3><h4 id="题目描述-68"><a href="#题目描述-68" class="headerlink" title="题目描述"></a>题目描述</h4><p>CheckGroup是一个选择组件类，支持单选和多选<br>选项参数格式、调用方式以及效果如下</p>
<p>选项参数格式：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> options = [&#123;<span class="attr">text</span>: <span class="string">&#x27;选项a&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;a&#x27;</span>&#125;, &#123;<span class="attr">text</span>: <span class="string">&#x27;选项b&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;b&#x27;</span>&#125;, &#123;<span class="attr">text</span>: <span class="string">&#x27;选项c&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;c&#x27;</span>&#125;, &#123;<span class="attr">text</span>: <span class="string">&#x27;选项d&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;d&#x27;</span>&#125;];</span><br></pre></td></tr></table></figure>

<p>实例化单选组件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> item = <span class="keyword">new</span> CheckGroup(<span class="built_in">document</span>.getElementById(<span class="string">&#x27;jsCheckGroup&#x27;</span>), options);</span><br><span class="line">item.val([<span class="string">&#x27;a&#x27;</span>]);</span><br></pre></td></tr></table></figure>

<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620202024.gif" alt="img"></p>
<p>实例化多选组件：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> item = <span class="keyword">new</span> CheckGroup(<span class="built_in">document</span>.getElementById(<span class="string">&#x27;jsCheckGroup&#x27;</span>), options, <span class="literal">true</span>);</span><br><span class="line">item.val([<span class="string">&#x27;a&#x27;</span>]);</span><br></pre></td></tr></table></figure>

<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620202051.gif" alt="img"></p>
<p>具体功能和需求如下：<br>1、单选组件请在 div.checkgroup 元素加上class radius<br>2、选中时，请在对应选项dom元素加上class selected<br>3、点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项<br>4、点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项<br>5、给定的options中, text和value属性的值均为非空字符串<br>6、val方法的参数和返回值均为数组(单选时数组长度不超过)<br>7、请阅读代码，并根据注释完成对应代码(方法initHtml、toggleEl、isSelected、val)<br>8、请不要手动修改html和css<br>9、不要使用第三方插件</p>
<h4 id="代码-28"><a href="#代码-28" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;jsCheckGroup&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;checkgroup radius&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">data-val</span>=<span class="string">&quot;a&quot;</span> <span class="attr">class</span>=<span class="string">&quot;item selected&quot;</span>&gt;</span>选项a<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">data-val</span>=<span class="string">&quot;b&quot;</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>选项b<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">data-val</span>=<span class="string">&quot;c&quot;</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>选项c<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">data-val</span>=<span class="string">&quot;d&quot;</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>选项d<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.checkgroup</span> <span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">42px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">42px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#c7c7c7</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.checkgroup</span><span class="selector-class">.radius</span> <span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">21px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.checkgroup</span> <span class="selector-class">.item</span><span class="selector-class">.selected</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#08b292</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#08b292</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ffffff</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">CheckGroup</span>(<span class="params">renderTo, options, isMultiple</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    that.renderTo = renderTo;</span><br><span class="line">    that.options = options;</span><br><span class="line">    that.isMultiple = !!isMultiple;</span><br><span class="line">    that.initHtml();</span><br><span class="line">    that.initEvent();</span><br><span class="line">&#125;</span><br><span class="line">CheckGroup.prototype.initHtml = fInitHtml;</span><br><span class="line">CheckGroup.prototype.initEvent = fInitEvent;</span><br><span class="line">CheckGroup.prototype.toggleEl = fToggleEl;</span><br><span class="line">CheckGroup.prototype.isSelected = fIsSelected;</span><br><span class="line">CheckGroup.prototype.val = fVal;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fInitHtml</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="comment">// 拼接html字符串</span></span><br><span class="line">    <span class="comment">// 【需求】1、单选组件请在 div.checkgroup 元素加上class radius</span></span><br><span class="line">    <span class="keyword">var</span> sHtml = <span class="string">`&lt;div class=&quot;checkgroup &#x27; &#x27; : &#x27; radius&#x27;&quot;&gt;`</span>;</span><br><span class="line">    that,</span><br><span class="line">        options.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        sHtml += <span class="string">`&lt;div data-val=&quot;<span class="subst">$&#123;item.value&#125;</span>&quot; class=&quot;item&quot;&gt;<span class="subst">$&#123;item.text&#125;</span>&lt;/div&gt;`</span>;</span><br><span class="line">    &#125;);</span><br><span class="line">    sHtml += <span class="string">&quot;&lt;/div&gt;&quot;</span>;</span><br><span class="line">    that.renderTo.innerHTML = sHtml;</span><br><span class="line">    <span class="comment">// 获取checkgroup的dom元素引用</span></span><br><span class="line">    that.el = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.checkgroup&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fInitEvent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    that.el &amp;&amp;</span><br><span class="line">        that.el.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> item = event.target;</span><br><span class="line">        item.classList.contains(<span class="string">&quot;item&quot;</span>) &amp;&amp; that.toggleEl(item);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fToggleEl</span>(<span class="params">item</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消 指定的选项dom元素</span></span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">if</span> (that.isSelected(item)) &#123;</span><br><span class="line">        <span class="comment">// 如果当前是选中状态，则取消选中</span></span><br><span class="line">        item.classList.remove(<span class="string">&quot;selected&quot;</span>);</span><br><span class="line">        that.val();</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (that.isMultiple) &#123;</span><br><span class="line">        <span class="comment">// 【需求】2、选中时，请在对应选项dom元素加上class selected</span></span><br><span class="line">        <span class="comment">// 【需求】4、点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项</span></span><br><span class="line">        item.classList.add(<span class="string">&quot;selected&quot;</span>);</span><br><span class="line">        that.val();</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 【需求】3、点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项</span></span><br><span class="line">        <span class="keyword">let</span> prevSelectedNode = [...item.parentElement.childNodes].find(<span class="function">(<span class="params">el</span>) =&gt;</span></span><br><span class="line">       		that.isSelected(el)</span><br><span class="line">       	);</span><br><span class="line">        prevSelectedNode &amp;&amp; prevSelectedNode.classList.remove(<span class="string">&quot;selected&quot;</span>);</span><br><span class="line">        item.classList.add(<span class="string">&quot;selected&quot;</span>);</span><br><span class="line">        that.val();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fIsSelected</span>(<span class="params">item</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 判断当前元素的classList中是否有selected, 由于classList是一个类数组，所以需要转译成数组才能获取到数组方法</span></span><br><span class="line">    <span class="keyword">if</span> ([...item.classList].includes(<span class="string">&quot;selected&quot;</span>)) <span class="keyword">return</span> item;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fVal</span>(<span class="params">values</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">arguments</span>.length === <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="comment">// 获取高亮的选项元素</span></span><br><span class="line">        <span class="keyword">var</span> items = [...that.renderTo.childNodes[<span class="number">0</span>].childNodes].filter(<span class="function">(<span class="params">el</span>) =&gt;</span></span><br><span class="line">        	[...el.classList].includes(<span class="string">&quot;selected&quot;</span>)</span><br><span class="line">       	);</span><br><span class="line">        <span class="comment">// 获取高亮的选项元素的data-val</span></span><br><span class="line">        <span class="keyword">var</span> result = items.map(<span class="function">(<span class="params">el</span>) =&gt;</span> el.dataset.val);</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 以下是初始选中状态的处理，同时也是为了防止单选状态下传递了多个参数做的处理</span></span><br><span class="line">    !that.isMultiple &amp;&amp; values.length &gt; <span class="number">1</span> &amp;&amp; (values.length = <span class="number">1</span>);</span><br><span class="line">    <span class="comment">// 获取所有的选项元素</span></span><br><span class="line">    <span class="keyword">var</span> items = that.renderTo.childNodes[<span class="number">0</span>].childNodes;</span><br><span class="line">    <span class="comment">// 在指定元素上加上高亮的class</span></span><br><span class="line">    items.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 【需求】6、val方法的参数和返回值均为数组(单选时数组长度不超过)</span></span><br><span class="line">        <span class="keyword">if</span> (values.includes(item.dataset.val)) &#123;</span><br><span class="line">            item.classList.add(<span class="string">&quot;selected&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>执行之后内部错误</p>
<h4 id="相关知识点-71"><a href="#相关知识点-71" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>时间的计算</li>
<li>原生js函数DOM操作</li>
</ul>
<h3 id="75-简易计算器"><a href="#75-简易计算器" class="headerlink" title="75. 简易计算器"></a>75. <a target="_blank" rel="noopener" href="https://www.nowcoder.com/practice/8237298fd1354cdaabd04796280cc90e">简易计算器</a></h3><h4 id="题目描述-69"><a href="#题目描述-69" class="headerlink" title="题目描述"></a>题目描述</h4><p>本题展示了一个简化版的计算器，需求如下：<br>1、除法操作时，如果被除数为0，则结果为0<br>2、结果如果为小数，最多保留小数点后两位，如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)<br>3、请阅读并根据提示补充完成函数initEvent、result和calculate<br>4、请不要手动修改html和css<br>5、不要使用第三方插件</p>
<p><img data-src="https://cdn.jsdelivr.net/gh/huxingyi1997/my_img/img/20210620213837.gif" alt="img"></p>
<h4 id="代码-29"><a href="#代码-29" class="headerlink" title="代码"></a>代码</h4><p><code>.html:</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;calculator&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">&quot;cal-header&quot;</span>&gt;</span>简易计算器<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">&quot;cal-main&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;origin-value&quot;</span>&gt;</span>0<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cal-keyboard&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;cal-items&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>7<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>8<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>9<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>÷<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>6<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>x<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>-<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;num&quot;</span>&gt;</span>0<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>清空<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>=<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">data-action</span>=<span class="string">&quot;operator&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>.css:</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line"><span class="selector-tag">ul</span>,</span><br><span class="line"><span class="selector-tag">li</span>,</span><br><span class="line">select &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span>,</span><br><span class="line"><span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.calculator</span> &#123;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">20px</span> auto;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-header</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">48px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">48px</span>;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-main</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-main</span> <span class="selector-class">.origin-value</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: right;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-main</span> <span class="selector-class">.origin-type</span>,</span><br><span class="line"><span class="selector-class">.cal-main</span> <span class="selector-class">.target-type</span> &#123;</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">70px</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-keyboard</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-items</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cal-items</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">    user-select: none;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">4</span>n + <span class="number">1</span>) &#123;</span><br><span class="line">    <span class="attribute">border-left</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-attr">[data-action=<span class="string">&quot;operator&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#f5923e</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.buttons</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">75px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.buttons</span> <span class="selector-class">.btn</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">75px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn-esc</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ff5a34</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.btn-backspace</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>.js:</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> Calculator = &#123;</span><br><span class="line">    init: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">        <span class="keyword">if</span> (!that.isInited) &#123;</span><br><span class="line">            that.isInited = <span class="literal">true</span>;</span><br><span class="line">            <span class="comment">// 保存操作信息</span></span><br><span class="line">            <span class="comment">// total: Number, 总的结果</span></span><br><span class="line">            <span class="comment">// next: String, 下一个和 total 进行运算的数据</span></span><br><span class="line">            <span class="comment">// action: String, 操作符号</span></span><br><span class="line">            that.data = &#123; <span class="attr">total</span>: <span class="number">0</span>, <span class="attr">next</span>: <span class="string">&quot;&quot;</span>, <span class="attr">action</span>: <span class="string">&quot;&quot;</span> &#125;;</span><br><span class="line">            that.bindEvent();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    bindEvent: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">        <span class="comment">// 获取 .cal-keyboard 元素</span></span><br><span class="line">        <span class="keyword">var</span> keyboardEl = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.cal-keyboard&quot;</span>);</span><br><span class="line">        keyboardEl &amp;&amp;</span><br><span class="line">            keyboardEl.addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 获取当前点击的dom元素</span></span><br><span class="line">            <span class="keyword">var</span> target = event.path[<span class="number">0</span>];</span><br><span class="line">            <span class="comment">// 获取target的 data-action 值</span></span><br><span class="line">            <span class="keyword">var</span> action = target.dataset.action;</span><br><span class="line">            <span class="comment">// 获取target的内容</span></span><br><span class="line">            <span class="keyword">var</span> value = target.innerText;</span><br><span class="line">            <span class="keyword">if</span> (action === <span class="string">&quot;num&quot;</span> || action === <span class="string">&quot;operator&quot;</span>) &#123;</span><br><span class="line">                that.result(value, action === <span class="string">&quot;num&quot;</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;,</span><br><span class="line">    result: <span class="function"><span class="keyword">function</span> (<span class="params">action, isNum</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">        <span class="keyword">var</span> data = that.data;</span><br><span class="line">        <span class="keyword">if</span> (isNum) &#123;</span><br><span class="line">            data.next = data.next === <span class="string">&quot;0&quot;</span> ? action : data.next + action;</span><br><span class="line">            !data.action &amp;&amp; (data.total = <span class="number">0</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (action === <span class="string">&quot;清空&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 设置清空时的对应状态</span></span><br><span class="line">            data.total = <span class="number">0</span>;</span><br><span class="line">            data.next = <span class="string">&quot;&quot;</span>;</span><br><span class="line">            data.action = <span class="string">&quot;&quot;</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (action === <span class="string">&quot;=&quot;</span>) &#123;</span><br><span class="line">            <span class="keyword">if</span> (data.next || data.action) &#123;</span><br><span class="line">                data.total = that.calculate(data.total, data.next, data.action);</span><br><span class="line">                data.next = <span class="string">&quot;&quot;</span>;</span><br><span class="line">                data.action = <span class="string">&quot;&quot;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (!data.next) &#123;</span><br><span class="line">            data.action = action;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (data.action) &#123;</span><br><span class="line">            data.total = that.calculate(data.total, data.next, data.action);</span><br><span class="line">            data.next = <span class="string">&quot;&quot;</span>;</span><br><span class="line">            data.action = action;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            data.total = +data.next || <span class="number">0</span>;</span><br><span class="line">            data.next = <span class="string">&quot;&quot;</span>;</span><br><span class="line">            data.action = action;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 获取 .origin-value 元素</span></span><br><span class="line">        <span class="keyword">var</span> valEl = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.origin-value&quot;</span>);</span><br><span class="line">        valEl &amp;&amp; (valEl.innerHTML = data.next || data.total || <span class="string">&quot;0&quot;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    calculate: <span class="function"><span class="keyword">function</span> (<span class="params">n1, n2, operator</span>) </span>&#123;</span><br><span class="line">        n1 = +n1 || <span class="number">0</span>;</span><br><span class="line">        n2 = +n2 || <span class="number">0</span>;</span><br><span class="line">        <span class="keyword">if</span> (operator === <span class="string">&quot;÷&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 获取除法的结果</span></span><br><span class="line">            <span class="comment">// 【需求】1、除法操作时，如果被除数为0，则结果为0</span></span><br><span class="line">            <span class="keyword">if</span> (n2 === <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">            <span class="keyword">return</span> parse2Float(n1 / n2);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (operator === <span class="string">&quot;x&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 获取乘法的结果</span></span><br><span class="line">            <span class="keyword">return</span> parse2Float(n1 * n2);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (operator === <span class="string">&quot;+&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 获取加法的结果</span></span><br><span class="line">            <span class="keyword">return</span> parse2Float(n1 + n2);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (operator === <span class="string">&quot;-&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 获取减法的结果</span></span><br><span class="line">            <span class="keyword">return</span> parse2Float(n1 - n2);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 【需求】2、结果如果为小数，最多保留小数点后两位，如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parse2Float</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">String</span>(num).split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>] &amp;&amp; <span class="built_in">String</span>(num).split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>].length &gt; <span class="number">2</span>) &#123;</span><br><span class="line">        num = num.toFixed(<span class="number">2</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> num;</span><br><span class="line">&#125;</span><br><span class="line">Calculator.init();</span><br></pre></td></tr></table></figure>

<h4 id="相关知识点-72"><a href="#相关知识点-72" class="headerlink" title="相关知识点"></a>相关知识点</h4><ul>
<li>数学计算</li>
<li>小数位取舍</li>
<li>原生js函数DOM操作</li>
</ul>

    </div>

    
    
    
      
<div>
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
</div>
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
              <a href="/tags/%E9%A2%98%E5%BA%93/" rel="tag"><i class="fa fa-tag"></i> 题库</a>
              <a href="/tags/%E7%89%9B%E5%AE%A2%E7%BD%91/" rel="tag"><i class="fa fa-tag"></i> 牛客网</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/06/02/%E5%B8%B8%E7%94%A8%E7%9A%84webpack%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95/" rel="prev" title="常用的webpack优化方法">
      <i class="fa fa-chevron-left"></i> 常用的webpack优化方法
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/06/02/%E4%BB%8E0%E5%BC%80%E5%A7%8B%E7%BC%96%E5%86%99webpack%E6%8F%92%E4%BB%B6/" rel="next" title="从0开始编写webpack插件">
      从0开始编写webpack插件 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BF%AE%E6%94%B9-this-%E6%8C%87%E5%90%91"><span class="nav-text">1. 修改 this 指向</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply%E4%BF%AE%E6%94%B9this%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">apply修改this作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call%E4%BF%AE%E6%94%B9this%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">call修改this作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind%E4%BF%AE%E6%94%B9this%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-text">bind修改this作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E8%8E%B7%E5%8F%96-url-%E5%8F%82%E6%95%B0"><span class="nav-text">2. 获取 url 参数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0-1"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-1"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-dom-%E8%8A%82%E7%82%B9%E6%9F%A5%E6%89%BE"><span class="nav-text">3. dom 节点查找</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0-2"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-1"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-2"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E6%A0%B9%E6%8D%AE%E5%8C%85%E5%90%8D%EF%BC%8C%E5%9C%A8%E6%8C%87%E5%AE%9A%E7%A9%BA%E9%97%B4%E4%B8%AD%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="nav-text">4. 根据包名，在指定空间中创建对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0-3"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-2"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-3"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="nav-text">5. 数组去重</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0-4"><span class="nav-text">问题描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8includes%E5%8E%BB%E9%87%8D"><span class="nav-text">利用includes去重</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8ES6-Set%E5%8E%BB%E9%87%8D"><span class="nav-text">利用ES6 Set去重</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%99%AE%E9%80%9A%E5%8F%8C%E9%87%8D%E5%BE%AA%E7%8E%AF%E5%8A%A0NaN%E6%A0%87%E5%BF%97%E4%BD%8D"><span class="nav-text">普通双重循环加NaN标志位</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-4"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6-%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97"><span class="nav-text">6. 斐波那契数列</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%80%92%E5%BD%92"><span class="nav-text">递归</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92"><span class="nav-text">动态规划</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%89%B9%E5%BE%81%E6%96%B9%E7%A8%8B"><span class="nav-text">特征方程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-5"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E5%8C%96%E8%BE%93%E5%87%BA"><span class="nav-text">7. 时间格式化输出</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-1"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8replace%E5%87%BD%E6%95%B0"><span class="nav-text">使用replace函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-text">使用正则表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-6"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8-%E8%8E%B7%E5%8F%96%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E9%95%BF%E5%BA%A6"><span class="nav-text">8. 获取字符串的长度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-2"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-3"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-7"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9-%E9%82%AE%E7%AE%B1%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%88%A4%E6%96%AD"><span class="nav-text">9. 邮箱字符串判断</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-3"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-8"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-%E9%A2%9C%E8%89%B2%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%8D%A2"><span class="nav-text">10. 颜色字符串转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-4"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-4"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-9"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11-%E5%B0%86%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%8D%A2%E4%B8%BA%E9%A9%BC%E5%B3%B0%E6%A0%BC%E5%BC%8F"><span class="nav-text">11. 将字符串转换为驼峰格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-5"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-5"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-10"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%AD%97%E7%AC%A6%E7%BB%9F%E8%AE%A1"><span class="nav-text">12. 字符串字符统计</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-6"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-6"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-11"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13-%E5%8A%A0%E7%B2%97%E6%96%87%E5%AD%97"><span class="nav-text">13. 加粗文字</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-7"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html"><span class="nav-text">html</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#js"><span class="nav-text">js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-12"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#14-%E6%AE%B5%E8%90%BD%E6%A0%87%E8%AF%86"><span class="nav-text">14. 段落标识</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-8"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html-1"><span class="nav-text">html</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#js-1"><span class="nav-text">js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9%EF%BC%9A"><span class="nav-text">相关知识点：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#15-%E8%AE%BE%E7%BD%AE%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2"><span class="nav-text">15. 设置文字颜色</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-9"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F"><span class="nav-text">行内样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#css%E6%A0%B7%E5%BC%8F"><span class="nav-text">css样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#js-2"><span class="nav-text">js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-13"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#16-%E6%9F%A5%E6%89%BE%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE"><span class="nav-text">16. 查找数组元素位置</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-10"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E9%81%8D%E5%8E%86"><span class="nav-text">简单遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95"><span class="nav-text">ES6新增数组方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-14"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#17-%E6%95%B0%E7%BB%84%E6%B1%82%E5%92%8C"><span class="nav-text">17. 数组求和</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-11"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8for%E5%BE%AA%E7%8E%AF%E9%81%8D%E5%8E%86"><span class="nav-text">使用for循环遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach"><span class="nav-text">forEach</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reduce"><span class="nav-text">reduce</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-15"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#18-%E7%A7%BB%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="nav-text">18. 移除数组中的元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-12"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E9%81%8D%E5%8E%86-1"><span class="nav-text">简单遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#filter%E8%BF%87%E6%BB%A4%E6%96%B9%E6%B3%95"><span class="nav-text">filter过滤方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%96%B0%E6%95%B0%E7%BB%84%E4%B8%AD%E4%BD%BF%E7%94%A8splice%E5%88%A0%E9%99%A4"><span class="nav-text">新数组中使用splice删除</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-16"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#19-%E7%A7%BB%E9%99%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="nav-text">19. 移除数组中的元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-13"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%BA%8F%E9%81%8D%E5%8E%86"><span class="nav-text">正序遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%80%92%E5%BA%8F%E9%81%8D%E5%8E%86"><span class="nav-text">倒序遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-17"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#20-%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0"><span class="nav-text">20. 添加元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-14"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E8%BF%AD%E4%BB%A3"><span class="nav-text">简单迭代</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#slice"><span class="nav-text">slice</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#concat"><span class="nav-text">concat</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6%E5%B1%95%E5%BC%80%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">ES6展开运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-18"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#21-%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E6%9C%80%E5%90%8E%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="nav-text">21. 删除数组最后一个元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-15"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#slice-1"><span class="nav-text">slice</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%94%E5%9B%9E%E6%96%B0%E6%95%B0%E7%BB%84API-pop"><span class="nav-text">返回新数组API + pop()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-19"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#22-%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0"><span class="nav-text">22. 添加元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-16"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%88%E6%8A%8A%E9%9C%80%E8%A6%81%E6%8F%92%E5%85%A5%E7%9A%84%E6%A0%91%E6%94%BE%E8%BF%9B%E5%8E%BB%EF%BC%8C%E7%84%B6%E5%90%8E%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="nav-text">先把需要插入的树放进去，然后遍历数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#unshift%E6%88%96%E8%80%85slice"><span class="nav-text">unshift或者slice</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#concat-1"><span class="nav-text">concat</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-20"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#23-%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="nav-text">23. 删除数组第一个元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-17"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#for%E5%BE%AA%E7%8E%AFpush%E5%85%83%E7%B4%A0"><span class="nav-text">for循环push元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#copy%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%8C%E5%88%A0%E9%99%A4%E5%85%83%E7%B4%A0%E8%BF%94%E5%9B%9E"><span class="nav-text">copy原数组，删除元素返回</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#slice-2"><span class="nav-text">slice</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-21"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#24-%E6%95%B0%E7%BB%84%E5%90%88%E5%B9%B6"><span class="nav-text">24. 数组合并</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-18"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3"><span class="nav-text">迭代</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#concat-2"><span class="nav-text">concat</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES%E5%B1%95%E5%BC%80%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">ES展开运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-22"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#25-%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0"><span class="nav-text">25. 添加元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-19"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%99%AE%E9%80%9A%E8%BF%AD%E4%BB%A3"><span class="nav-text">普通迭代</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%96%B0%E6%95%B0%E7%BB%84-splice%E6%96%B9%E6%B3%95"><span class="nav-text">新数组+splice方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8B%BC%E6%95%B0%E7%BB%84"><span class="nav-text">拼数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-23"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#26-%E8%AE%A1%E6%95%B0"><span class="nav-text">26. 计数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-20"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A1%E6%95%B0%E5%99%A8"><span class="nav-text">计数器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#filter%E8%BF%87%E6%BB%A4"><span class="nav-text">filter过滤</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#reduce-1"><span class="nav-text">reduce</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-24"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#27-%E6%9F%A5%E6%89%BE%E9%87%8D%E5%A4%8D%E5%85%83%E7%B4%A0"><span class="nav-text">27. 查找重复元素</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-21"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8E%92%E5%BA%8F-%E5%8F%8C%E6%8C%87%E9%92%88"><span class="nav-text">排序+双指针</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E4%B8%A4%E4%B8%AASet%E5%AD%98%E5%82%A8"><span class="nav-text">使用两个Set存储</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8map%E8%AE%B0%E5%BD%95count"><span class="nav-text">使用map记录count</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8indexOf"><span class="nav-text">利用indexOf</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-25"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#28-%E6%B1%82%E4%BA%8C%E6%AC%A1%E6%96%B9"><span class="nav-text">28. 求二次方</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-22"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#map"><span class="nav-text">map</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach-1"><span class="nav-text">forEach</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-26"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#29-%E6%9F%A5%E6%89%BE%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE"><span class="nav-text">29. 查找元素位置</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-23"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach%E9%81%8D%E5%8E%86"><span class="nav-text">forEach遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-27"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#30-%E9%81%BF%E5%85%8D%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F"><span class="nav-text">30. 避免全局变量</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-24"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#myObject%E5%89%8D%E9%9D%A2%E5%8A%A0var-let-const"><span class="nav-text">myObject前面加var&#x2F;let&#x2F;const</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-28"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#31-%E6%AD%A3%E7%A1%AE%E7%9A%84%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89"><span class="nav-text">31. 正确的函数定义</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-25"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-text">使用函数表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87"><span class="nav-text">变量提升</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-29"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#32-%E6%AD%A3%E7%A1%AE%E7%9A%84%E4%BD%BF%E7%94%A8-parseInt"><span class="nav-text">32. 正确的使用 parseInt</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-26"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%A1%AE%E5%AE%9A%E6%98%AF%E5%8D%81%E8%BF%9B%E5%88%B6"><span class="nav-text">确定是十进制</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-30"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#33-%E5%AE%8C%E5%85%A8%E7%AD%89%E5%90%8C"><span class="nav-text">33. 完全等同</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-27"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-7"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-31"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#34-%E8%AE%A1%E6%97%B6%E5%99%A8"><span class="nav-text">34. 计时器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-28"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-8"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-32"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#35-%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6"><span class="nav-text">35. 流程控制</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-29"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-9"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-33"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#36-%E5%87%BD%E6%95%B0%E4%BC%A0%E5%8F%82"><span class="nav-text">36. 函数传参</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-30"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E4%BC%A0%E5%8F%82"><span class="nav-text">直接传参</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply"><span class="nav-text">apply</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call"><span class="nav-text">call</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind"><span class="nav-text">bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-34"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#37-%E5%87%BD%E6%95%B0%E7%9A%84%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-text">37. 函数的上下文</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-31"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply-1"><span class="nav-text">apply</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call-1"><span class="nav-text">call</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind-1"><span class="nav-text">bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-35"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#38-%E8%BF%94%E5%9B%9E%E5%87%BD%E6%95%B0"><span class="nav-text">38. 返回函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-32"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-10"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-36"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#39-%E4%BD%BF%E7%94%A8%E9%97%AD%E5%8C%85"><span class="nav-text">39. 使用闭包</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-33"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8let-%E5%BE%AA%E7%8E%AF"><span class="nav-text">使用let+循环</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8map%E5%87%BD%E6%95%B0"><span class="nav-text">使用map函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-37"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#40-%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0"><span class="nav-text">40. 二次封装函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-34"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8"><span class="nav-text">直接调用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">扩展运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call-2"><span class="nav-text">call</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply-2"><span class="nav-text">apply</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind-2"><span class="nav-text">bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-38"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#41-%E4%BD%BF%E7%94%A8-arguments"><span class="nav-text">41. 使用 arguments</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-35"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E9%81%8D%E5%8E%86"><span class="nav-text">直接遍历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6%E6%8A%8Aarguments%E8%BD%AC%E5%8C%96%E6%88%90%E6%95%B0%E7%BB%84%E7%94%A8%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E5%BC%8F%E7%9B%B8%E5%8A%A0"><span class="nav-text">ES6把arguments转化成数组用数组的方式相加</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-39"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#42-%E4%BD%BF%E7%94%A8-apply-%E8%B0%83%E7%94%A8%E5%87%BD%E6%95%B0"><span class="nav-text">42. 使用 apply 调用函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-36"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-11"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-40"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#43-%E4%BA%8C%E6%AC%A1%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0"><span class="nav-text">43. 二次封装函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-37"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%94%A8call%E7%9B%B4%E6%8E%A5%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">用call直接扩展运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%94%A8apply%E6%8E%A5%E6%94%B6%E6%95%B0%E7%BB%84"><span class="nav-text">用apply接收数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind-3"><span class="nav-text">bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-41"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#44-%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="nav-text">44. 柯里化</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-38"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-12"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-42"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#45-%E6%88%96%E8%BF%90%E7%AE%97"><span class="nav-text">45. 或运算</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-39"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E6%88%96%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">直接或运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E4%BD%8D%E8%BF%90%E7%AE%97"><span class="nav-text">利用位运算</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-43"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#46-%E4%B8%94%E8%BF%90%E7%AE%97"><span class="nav-text">46. 且运算</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-40"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B4%E6%8E%A5%E4%B8%94%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-text">直接且运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E4%BD%8D%E8%BF%90%E7%AE%97-1"><span class="nav-text">利用位运算</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-44"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#47-%E6%A8%A1%E5%9D%97"><span class="nav-text">47. 模块</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-41"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1"><span class="nav-text">对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0"><span class="nav-text">构造函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9%EF%BC%9A-1"><span class="nav-text">相关知识点：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#48-%E4%BA%8C%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2"><span class="nav-text">48. 二进制转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-42"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%8D%E8%BF%90%E7%AE%97"><span class="nav-text">位运算</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#while%E5%BE%AA%E7%8E%AF"><span class="nav-text">while循环</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-45"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#49-%E4%BA%8C%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2"><span class="nav-text">49. 二进制转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-43"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#parseInt%E5%87%BD%E6%95%B0"><span class="nav-text">parseInt函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AF%8F%E4%BD%8D%E4%B9%98%E4%BA%8C%E6%B3%95"><span class="nav-text">每位乘二法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-46"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#50-%E4%BA%8C%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2"><span class="nav-text">50. 二进制转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-44"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8API%E8%BD%AC%E5%8C%96%E6%88%90%E4%BA%8C%E8%BF%9B%E5%88%B6%E7%84%B6%E5%90%8E%E8%A1%A5%E7%A9%BA%E7%BC%BA"><span class="nav-text">使用API转化成二进制然后补空缺</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BD%AC%E5%8C%96%E4%B9%8B%E5%90%8E%E6%A3%80%E6%9F%A5%E4%BD%8D"><span class="nav-text">转化之后检查位</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-47"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#51-%E4%B9%98%E6%B3%95"><span class="nav-text">51. 乘法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-45"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%A1%AE%E5%AE%9A%E5%B0%8F%E6%95%B0%E7%9A%84%E4%BD%8D%E6%95%B0%E7%84%B6%E5%90%8E%E4%BF%9D%E8%AF%81%E7%B2%BE%E5%BA%A6%E6%98%AF%E5%A4%9A%E5%B0%91%E4%BD%8D"><span class="nav-text">确定小数的位数然后保证精度是多少位</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8toFixed%E5%87%BD%E6%95%B0"><span class="nav-text">利用toFixed函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-48"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#52-%E6%94%B9%E5%8F%98%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="nav-text">52. 改变上下文</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-46"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#call-3"><span class="nav-text">call</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply-3"><span class="nav-text">apply</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind-4"><span class="nav-text">bind</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-49"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#53-%E6%89%B9%E9%87%8F%E6%94%B9%E5%8F%98%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="nav-text">53. 批量改变对象的属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-47"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1%E4%B8%8A%E6%B7%BB%E5%8A%A0%E5%B1%9E%E6%80%A7"><span class="nav-text">原型对象上添加属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-50"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#54-%E5%B1%9E%E6%80%A7%E9%81%8D%E5%8E%86"><span class="nav-text">54. 属性遍历</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-48"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#for%E5%BE%AA%E7%8E%AF"><span class="nav-text">for循环</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#forEach%E6%88%96-map"><span class="nav-text">forEach或 map</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-51"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#55-%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E5%8C%85%E5%90%AB%E6%95%B0%E5%AD%97"><span class="nav-text">55. 判断是否包含数字</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-49"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%AF%94%E8%BE%83ASCII%E7%A0%81"><span class="nav-text">字符串比较ASCII码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%88%A9%E7%94%A8%E9%9A%90%E5%BC%8F%E7%B1%BB%E5%9E%8B%E8%BD%AC%E5%8C%96"><span class="nav-text">利用隐式类型转化</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-52"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#56-%E6%A3%80%E6%9F%A5%E9%87%8D%E5%A4%8D%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-text">56. 检查重复字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-50"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%8C%E6%8C%87%E9%92%88"><span class="nav-text">双指针</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-1"><span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-53"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#57-%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%BB%A5%E5%85%83%E9%9F%B3%E5%AD%97%E6%AF%8D%E7%BB%93%E5%B0%BE"><span class="nav-text">57. 判断是否以元音字母结尾</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-51"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-2"><span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#indexOf%E6%88%96includes"><span class="nav-text">indexOf或includes</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-54"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#58-%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-text">58. 获取指定字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-52"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A1%E6%95%B0%E5%99%A8-1"><span class="nav-text">计数器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F-3"><span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-55"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#59-%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88%E6%8C%87%E5%AE%9A%E6%A0%BC%E5%BC%8F"><span class="nav-text">59. 判断是否符合指定格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-53"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-13"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-56"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#60-%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88-USD-%E6%A0%BC%E5%BC%8F"><span class="nav-text">60. 判断是否符合 USD 格式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-54"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-14"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-57"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#61-%E8%B4%AD%E7%89%A9%E8%BD%A6"><span class="nav-text">61. 购物车</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-55"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-15"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-58"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#62-%E8%A1%A8%E6%A0%BC%E6%8E%92%E5%BA%8F"><span class="nav-text">62. 表格排序</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-56"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-16"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-59"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#63-%E6%9B%BF%E6%8D%A2%E9%93%BE%E6%8E%A5"><span class="nav-text">63. 替换链接</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-57"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-17"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-60"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#64-%E5%80%92%E8%AE%A1%E6%97%B6"><span class="nav-text">64. 倒计时</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-58"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-18"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-61"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#65-%E6%8B%96%E6%8B%BD%E6%8B%BC%E5%9B%BE"><span class="nav-text">65. 拖拽拼图</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-59"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-19"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-62"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#66-%E5%8F%8C%E8%89%B2%E7%90%83%E6%9C%BA%E9%80%89%E4%B8%80%E6%B3%A8"><span class="nav-text">66. 双色球机选一注</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-60"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-20"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-63"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#67-%E6%99%BA%E8%83%BD%E6%8F%90%E7%A4%BA"><span class="nav-text">67. 智能提示</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-61"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-21"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-64"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#68-%E6%96%87%E5%AD%97%E8%BE%93%E5%87%BA"><span class="nav-text">68. 文字输出</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-62"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-22"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-65"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#69-%E5%8C%85%E5%9B%B4"><span class="nav-text">69. 包围</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-63"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-23"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-66"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#70-%E5%88%86%E9%A1%B5"><span class="nav-text">70. 分页</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-64"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-24"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-67"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#71-%E7%A7%BB%E5%8A%A8%E6%8E%A7%E5%88%B6"><span class="nav-text">71. 移动控制</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-65"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-25"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-68"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#72-dom%E8%8A%82%E7%82%B9%E8%BD%AC%E6%88%90json%E6%95%B0%E6%8D%AE"><span class="nav-text">72. dom节点转成json数据</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-66"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-26"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-69"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#73-%E8%AE%BE%E7%BD%AE%E6%A0%87%E7%AD%BE"><span class="nav-text">73. 设置标签</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-67"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-27"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-70"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#74-%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6"><span class="nav-text">74. 选择组件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-68"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-28"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-71"><span class="nav-text">相关知识点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#75-%E7%AE%80%E6%98%93%E8%AE%A1%E7%AE%97%E5%99%A8"><span class="nav-text">75. 简易计算器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%A2%98%E7%9B%AE%E6%8F%8F%E8%BF%B0-69"><span class="nav-text">题目描述</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81-29"><span class="nav-text">代码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9-72"><span class="nav-text">相关知识点</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="hxy"
      src="/images/Robben.gif">
  <p class="site-author-name" itemprop="name">hxy</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">80</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">120</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/huxingyi1997" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;huxingyi1997" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:huxingyi1997@zju.edu.cn" title="E-Mail → mailto:huxingyi1997@zju.edu.cn" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-frog"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">hxy</span>
</div>

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共1039.2k字</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'pQsO3ySbU4VtWN2j1FLA74Ha-gzGzoHsz',
      appKey     : 'QYacMDY2VY7Wazprg1X6FiUv',
      placeholder: "Just go go",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : false,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

  
  <!-- 动态背景特效 -->
  <!-- 樱花特效 -->
    <script async src="/js/src/sakura.js"></script>
    <script async src="/js/src/fairyDustCursor.js"></script>
</body>
</html>
